chore: use new syntax for css variables (#3258)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

test/components/Accordion.spec.ts

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

test/components/Avatar.spec.ts

@@ -14,7 +14,7 @@ describe('Avatar', () => {
     ['with icon', { props: { icon: 'i-lucide-image' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { src: 'https://github.com/benjamincanac.png', size } }]),
     ['with as', { props: { as: 'section' } }],
-    ['with class', { props: { class: 'bg-[var(--ui-bg)]' } }],
+    ['with class', { props: { class: 'bg-(--ui-bg)' } }],
     ['with ui', { props: { ui: { fallback: 'font-bold' } } }],
     // Slots
     ['with default slot', { slots: { default: '🇫🇷' } }]

test/components/Chip.spec.ts

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

test/components/Collapsible.spec.ts

@@ -12,7 +12,7 @@ describe('Collapsible', () => {
     ['with unmountOnHide', { props: { ...props, unmountOnHide: false } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with class', { props: { ...props, class: 'flex flex-col gap-2 w-48' } }],
-    ['with ui', { props: { ...props, ui: { content: 'bg-[var(--ui-bg-elevated)]' } } }],
+    ['with ui', { props: { ...props, ui: { content: 'bg-(--ui-bg-elevated)' } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }]

test/components/CommandPalette.spec.ts

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

test/components/Drawer.spec.ts

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

test/components/FormField.spec.ts

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

test/components/Link.spec.ts

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

test/components/Modal.spec.ts

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

test/components/Progress.spec.ts

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

test/components/Slideover.spec.ts

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

test/components/Slider.spec.ts

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

test/components/Tabs.spec.ts

@@ -40,7 +40,7 @@ describe('Tabs', () => {
     ['with unmountOnHide', { props: { ...props, unmountOnHide: false } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'w-96' } }],
-    ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-[var(--ui-border)]' } } }],
+    ['with ui', { props: { ...props, ui: { content: 'w-full ring ring-(--ui-border)' } } }],
     // Slots
     ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],

test/components/Toast.spec.ts

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

test/components/__snapshots__/Accordion-vue.spec.ts.snap

@@ -2,38 +2,38 @@
 
 exports[`Accordion > renders with as correctly 1`] = `
 "<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -43,38 +43,38 @@ exports[`Accordion > renders with as correctly 1`] = `
 
 exports[`Accordion > renders with as correctly 2`] = `
 "<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="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -84,38 +84,38 @@ exports[`Accordion > renders with as correctly 2`] = `
 
 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="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -125,38 +125,38 @@ exports[`Accordion > renders with body slot correctly 1`] = `
 
 exports[`Accordion > renders with class correctly 1`] = `
 "<div class="w-96">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -166,38 +166,38 @@ exports[`Accordion > renders with class correctly 1`] = `
 
 exports[`Accordion > renders with collapsible correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -207,36 +207,36 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
 
 exports[`Accordion > renders with content slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -246,38 +246,38 @@ exports[`Accordion > renders with content slot correctly 1`] = `
 
 exports[`Accordion > renders with custom body slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="open" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">
       <div class="text-sm pb-3.5">Custom body slot</div>
     </div>
@@ -287,38 +287,38 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
 
 exports[`Accordion > renders with custom slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="open" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">Custom slot</div>
   </div>
 </div>"
@@ -326,38 +326,38 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
 
 exports[`Accordion > renders with default slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -367,38 +367,38 @@ exports[`Accordion > renders with default slot correctly 1`] = `
 
 exports[`Accordion > renders with defaultValue correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -408,38 +408,38 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
 
 exports[`Accordion > renders with disabled correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[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="reka-accordion-trigger-v-0" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -449,38 +449,38 @@ exports[`Accordion > renders with disabled correctly 1`] = `
 
 exports[`Accordion > renders with items correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -490,38 +490,38 @@ exports[`Accordion > renders with items correctly 1`] = `
 
 exports[`Accordion > renders with labelKey correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide-info</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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-info</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="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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-lucide-download</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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-download</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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide-pipette</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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-pipette</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="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide-layout-dashboard</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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-layout-dashboard</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="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide-layers-3</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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-layers-3</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="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide-wrench</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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-lucide-wrench</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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -531,38 +531,38 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
 
 exports[`Accordion > renders with leading slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -572,38 +572,38 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
 
 exports[`Accordion > renders with modelValue correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -613,38 +613,38 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
 
 exports[`Accordion > renders with trailing slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -654,38 +654,38 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
 
 exports[`Accordion > renders with trailingIcon correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -695,38 +695,38 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
 
 exports[`Accordion > renders with type correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -736,38 +736,38 @@ exports[`Accordion > renders with type correctly 1`] = `
 
 exports[`Accordion > renders with ui correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[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="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <!---->
     </div>
@@ -777,38 +777,38 @@ exports[`Accordion > renders with ui correctly 1`] = `
 
 exports[`Accordion > renders with unmountOnHide 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="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-1" hidden="">
       <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-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="reka-accordion-trigger-v-2" data-reka-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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3" hidden="">
       <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="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-5" hidden="">
       <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="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-7" hidden="">
       <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="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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" aria-labelledby="reka-accordion-trigger-v-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-9" hidden="">
       <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="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group 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 data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="reka-accordion-trigger-v-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11" hidden="">
       <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>

test/components/__snapshots__/Accordion.spec.ts.snap

@@ -2,38 +2,38 @@
 
 exports[`Accordion > renders with as correctly 1`] = `
 "<section class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -43,38 +43,38 @@ exports[`Accordion > renders with as correctly 1`] = `
 
 exports[`Accordion > renders with as correctly 2`] = `
 "<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="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -84,38 +84,38 @@ exports[`Accordion > renders with as correctly 2`] = `
 
 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="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -125,38 +125,38 @@ exports[`Accordion > renders with body slot correctly 1`] = `
 
 exports[`Accordion > renders with class correctly 1`] = `
 "<div class="w-96">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -166,38 +166,38 @@ exports[`Accordion > renders with class correctly 1`] = `
 
 exports[`Accordion > renders with collapsible correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -207,36 +207,36 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
 
 exports[`Accordion > renders with content slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -246,38 +246,38 @@ exports[`Accordion > renders with content slot correctly 1`] = `
 
 exports[`Accordion > renders with custom body slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-collapsible-content-v-0-0-11">
       <div class="text-sm pb-3.5">Custom body slot</div>
     </div>
@@ -287,38 +287,38 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
 
 exports[`Accordion > renders with custom slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-collapsible-content-v-0-0-11">Custom slot</div>
   </div>
 </div>"
@@ -326,38 +326,38 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
 
 exports[`Accordion > renders with default slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Default slot</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -367,38 +367,38 @@ exports[`Accordion > renders with default slot correctly 1`] = `
 
 exports[`Accordion > renders with defaultValue correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -408,38 +408,38 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
 
 exports[`Accordion > renders with disabled correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-[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="reka-accordion-trigger-v-0-0-0" data-reka-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-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-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-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-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-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-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-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-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-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -449,38 +449,38 @@ exports[`Accordion > renders with disabled correctly 1`] = `
 
 exports[`Accordion > renders with items correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -490,38 +490,38 @@ exports[`Accordion > renders with items correctly 1`] = `
 
 exports[`Accordion > renders with labelKey correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-info</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-info</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-download</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-download</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-pipette</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-pipette</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layout-dashboard</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layout-dashboard</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layers-3</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-layers-3</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-wrench</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">i-lucide-wrench</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -531,38 +531,38 @@ exports[`Accordion > renders with labelKey correctly 1`] = `
 
 exports[`Accordion > renders with leading slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75">Leading slot<span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group 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-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0">Leading slot<span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -572,38 +572,38 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
 
 exports[`Accordion > renders with modelValue correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -613,38 +613,38 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
 
 exports[`Accordion > renders with trailing slot correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span>Trailing slot</button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span>Trailing slot</button></h3>
     <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span>Trailing slot</button></h3>
+  <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download 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="reka-accordion-trigger-v-0-0-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-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="reka-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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span>Trailing slot</button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span>Trailing slot</button></h3>
     <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span>Trailing slot</button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span>Trailing slot</button></h3>
     <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span>Trailing slot</button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span>Trailing slot</button></h3>
     <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span>Trailing slot</button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span>Trailing slot</button></h3>
     <div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -654,38 +654,38 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
 
 exports[`Accordion > renders with trailingIcon correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide: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" aria-labelledby="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide: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" aria-labelledby="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide: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" aria-labelledby="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide: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" aria-labelledby="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:plus shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide: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" aria-labelledby="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -695,38 +695,38 @@ exports[`Accordion > renders with trailingIcon correctly 1`] = `
 
 exports[`Accordion > renders with type correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b border-[var(--ui-border)] last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -736,38 +736,38 @@ exports[`Accordion > renders with type correctly 1`] = `
 
 exports[`Accordion > renders with ui correctly 1`] = `
 "<div class="w-full">
-  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-[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="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b last:border-b-0 border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <!---->
     </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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b last:border-b-0 border-(--ui-border-accented)">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <!---->
     </div>
@@ -777,38 +777,38 @@ exports[`Accordion > renders with ui correctly 1`] = `
 
 exports[`Accordion > renders with unmountOnHide 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="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-0" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:info shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Getting Started</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-0" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-1" hidden="">
       <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-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="reka-accordion-trigger-v-0-0-2" data-reka-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-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-(--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="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0 cursor-not-allowed opacity-75"><span class="iconify i-lucide:download shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Installation</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-2" data-state="closed" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-3" hidden="">
       <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="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-4" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:pipette shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Theming</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-4" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-5" hidden="">
       <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="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-6" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layout-dashboard shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Layouts</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-6" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-7" hidden="">
       <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="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-8" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:layers-3 shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Components</span><span class="iconify i-lucide:chevron-down shrink-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="reka-accordion-trigger-v-0-0-8" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-9" hidden="">
       <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="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide:sun shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></button></h3>
+  <div data-state="closed" data-orientation="vertical" class="border-b border-(--ui-border) last:border-b-0">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-10" data-reka-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0"><span class="iconify i-lucide:wrench shrink-0 size-5" aria-hidden="true"></span><span class="text-start break-words">Utilities</span><span class="iconify i-lucide: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="reka-accordion-trigger-v-0-0-10" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-0-0-11" hidden="">
       <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>

test/components/__snapshots__/Alert-vue.spec.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > renders with actions correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
         <!--v-if--><span class="truncate">Action</span>
         <!--v-if-->
       </button></div>
@@ -16,7 +16,7 @@ exports[`Alert > renders with actions correctly 1`] = `
 `;
 
 exports[`Alert > renders with as correctly 1`] = `
-"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
@@ -39,7 +39,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
 `;
 
 exports[`Alert > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
+"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg) w-48">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -51,7 +51,7 @@ exports[`Alert > renders with class correctly 1`] = `
 `;
 
 exports[`Alert > renders with close correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -59,7 +59,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -68,7 +68,7 @@ exports[`Alert > renders with close correctly 1`] = `
 `;
 
 exports[`Alert > renders with close slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -80,7 +80,7 @@ exports[`Alert > renders with close slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with closeIcon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -88,7 +88,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -97,7 +97,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Alert > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -109,7 +109,7 @@ exports[`Alert > renders with description correctly 1`] = `
 `;
 
 exports[`Alert > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -121,7 +121,7 @@ exports[`Alert > renders with description slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
@@ -132,7 +132,7 @@ exports[`Alert > renders with icon correctly 1`] = `
 `;
 
 exports[`Alert > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Leading slot</div>
@@ -144,7 +144,7 @@ exports[`Alert > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -156,7 +156,7 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -168,7 +168,7 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-bg) bg-(--ui-bg-inverted)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -180,7 +180,7 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -192,13 +192,13 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <div class="text-sm opacity-90 mt-1">This is a description</div>
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
       <!--v-if--><span class="truncate">Action</span>
       <!--v-if-->
     </button>
@@ -208,11 +208,11 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <div class="text-sm opacity-90 mt-1">This is a description</div>
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
         <!--v-if--><span class="truncate">Action</span>
         <!--v-if-->
       </button></div>
@@ -222,7 +222,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -234,7 +234,7 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -246,7 +246,7 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -258,7 +258,7 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -270,7 +270,7 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -282,7 +282,7 @@ exports[`Alert > renders with title correctly 1`] = `
 `;
 
 exports[`Alert > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Title slot</div>
@@ -294,7 +294,7 @@ exports[`Alert > renders with title slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-bold">Alert</div>

test/components/__snapshots__/Alert.spec.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > renders with actions correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
         <!--v-if--><span class="truncate">Action</span>
         <!--v-if-->
       </button></div>
@@ -16,7 +16,7 @@ exports[`Alert > renders with actions correctly 1`] = `
 `;
 
 exports[`Alert > renders with as correctly 1`] = `
-"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -28,7 +28,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
@@ -39,7 +39,7 @@ exports[`Alert > renders with avatar correctly 1`] = `
 `;
 
 exports[`Alert > renders with class correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
+"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg) w-48">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -51,7 +51,7 @@ exports[`Alert > renders with class correctly 1`] = `
 `;
 
 exports[`Alert > renders with close correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -59,7 +59,7 @@ exports[`Alert > renders with close correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -68,7 +68,7 @@ exports[`Alert > renders with close correctly 1`] = `
 `;
 
 exports[`Alert > renders with close slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -80,7 +80,7 @@ exports[`Alert > renders with close slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with closeIcon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -88,7 +88,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
-    <!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide: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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -97,7 +97,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 `;
 
 exports[`Alert > renders with description correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -109,7 +109,7 @@ exports[`Alert > renders with description correctly 1`] = `
 `;
 
 exports[`Alert > renders with description slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -121,7 +121,7 @@ exports[`Alert > renders with description slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with icon correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <!--v-if-->
@@ -132,7 +132,7 @@ exports[`Alert > renders with icon correctly 1`] = `
 `;
 
 exports[`Alert > renders with leading slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Leading slot</div>
@@ -144,7 +144,7 @@ exports[`Alert > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -156,7 +156,7 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -168,7 +168,7 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-bg) bg-(--ui-bg-inverted)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -180,7 +180,7 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with neutral variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -192,13 +192,13 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation horizontal correctly 1`] = `
-"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
+"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <div class="text-sm opacity-90 mt-1">This is a description</div>
     <!--v-if-->
   </div>
-  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
       <!--v-if--><span class="truncate">Action</span>
       <!--v-if-->
     </button>
@@ -208,11 +208,11 @@ exports[`Alert > renders with orientation horizontal correctly 1`] = `
 `;
 
 exports[`Alert > renders with orientation vertical correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
     <div class="text-sm opacity-90 mt-1">This is a description</div>
-    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
         <!--v-if--><span class="truncate">Action</span>
         <!--v-if-->
       </button></div>
@@ -222,7 +222,7 @@ exports[`Alert > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant outline correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -234,7 +234,7 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant soft correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -246,7 +246,7 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant solid correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -258,7 +258,7 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with primary variant subtle correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -270,7 +270,7 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`Alert > renders with title correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Alert</div>
@@ -282,7 +282,7 @@ exports[`Alert > renders with title correctly 1`] = `
 `;
 
 exports[`Alert > renders with title slot correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-medium">Title slot</div>
@@ -294,7 +294,7 @@ exports[`Alert > renders with title slot correctly 1`] = `
 `;
 
 exports[`Alert > renders with ui correctly 1`] = `
-"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col">
     <div class="text-sm font-bold">Alert</div>

test/components/__snapshots__/Avatar-vue.spec.ts.snap

@@ -1,39 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
 
 exports[`Avatar > renders with as correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base">
-  <!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span>
+"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">
+  <!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span>
 </section>"
 `;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-[var(--ui-bg)]"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if-->🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if-->🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-[var(--ui-text-muted)] shrink-0" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-(--ui-text-muted) shrink-0" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="leading-none text-[var(--ui-text-muted)] truncate font-bold"> </span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="leading-none text-(--ui-text-muted) truncate font-bold"> </span></span>"`;

test/components/__snapshots__/Avatar.spec.ts.snap

@@ -1,39 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>"`;
+exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">BC</span></span>"`;
 
 exports[`Avatar > renders with as correctly 1`] = `
-"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base">
-  <!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span>
+"<section class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base">
+  <!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span>
 </section>"
 `;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-[var(--ui-bg)]"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-base bg-(--ui-bg)"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if-->🇫🇷</span>"`;
+exports[`Avatar > renders with default slot correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if-->🇫🇷</span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="iconify i-lucide:image text-[var(--ui-text-muted)] shrink-0" aria-hidden="true"></span></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="iconify i-lucide:image text-(--ui-text-muted) shrink-0" aria-hidden="true"></span></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px]"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px]"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-12 text-2xl"><img role="img" src="https://github.com/benjamincanac.png" width="48" height="48" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px]"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-9 text-lg"><img role="img" src="https://github.com/benjamincanac.png" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-7 text-sm"><img role="img" src="https://github.com/benjamincanac.png" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-10 text-xl"><img role="img" src="https://github.com/benjamincanac.png" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><img role="img" src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>"`;
 
-exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">+1</span></span>"`;
+exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="font-medium leading-none text-(--ui-text-muted) truncate">+1</span></span>"`;
 
-exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-8 text-base"><!--v-if--><span class="leading-none text-[var(--ui-text-muted)] truncate font-bold"> </span></span>"`;
+exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-8 text-base"><!--v-if--><span class="leading-none text-(--ui-text-muted) truncate font-bold"> </span></span>"`;

test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap

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

test/components/__snapshots__/AvatarGroup.spec.ts.snap

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

test/components/__snapshots__/Badge-vue.spec.ts.snap

@@ -1,117 +1,117 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if--><span class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
 <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-(--ui-primary) text-(--ui-bg) rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if-->Default slot<!--v-if--></span>"`;
 
-exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)">Leading slot<!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-text) bg-(--ui-bg-elevated)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-bg) bg-(--ui-bg-inverted)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) ring ring-inset ring-(--ui-primary)/50"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary)/10 text-(--ui-primary)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size sm correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xs correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;

test/components/__snapshots__/Badge.spec.ts.snap

@@ -1,133 +1,133 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]">
+"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)">
   <!--v-if--><span class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
 <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-(--ui-primary) text-(--ui-bg) rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if-->Default slot<!--v-if--></span>"`;
 
 exports[`Badge > renders with icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with leading and icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)">Leading slot<!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-text) bg-(--ui-bg-elevated)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-bg) bg-(--ui-bg-inverted)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) ring ring-inset ring-(--ui-primary)/50"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary)/10 text-(--ui-primary)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size sm correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size xs correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-primary) text-(--ui-bg)"><!--v-if--><span class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;

test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap

@@ -3,11 +3,11 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -16,11 +16,11 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -29,11 +29,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold">Custom slot</a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -42,11 +42,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75">Item slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors">Item slot</a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -55,11 +55,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Item label slot</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Item label slot</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Item label slot</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Item label slot</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -68,11 +68,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -81,11 +81,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span>Item trailing slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span>Item trailing slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span>Item trailing slot</a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span>Item trailing slot</span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -94,11 +94,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -107,13 +107,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
         <!--v-if-->
       </a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">i-lucide-box</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">i-lucide-link</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">i-lucide-box</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -122,11 +122,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium 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="truncate">Components</span></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium 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="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -135,11 +135,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -148,11 +148,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) cursor-not-allowed opacity-75 font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-muted)" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"

test/components/__snapshots__/Breadcrumb.spec.ts.snap

@@ -3,11 +3,11 @@
 exports[`Breadcrumb > renders with as correctly 1`] = `
 "<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </div>"
@@ -16,11 +16,11 @@ exports[`Breadcrumb > renders with as correctly 1`] = `
 exports[`Breadcrumb > renders with class correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -29,11 +29,11 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold">Custom slot</a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -42,11 +42,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75">Item slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors">Item slot</a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75">Item slot</span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -55,11 +55,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Item label slot</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Item label slot</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -68,11 +68,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -81,11 +81,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span>Item trailing slot</a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span>Item trailing slot</span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span>Item trailing slot</a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span>Item trailing slot</span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -94,11 +94,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
 exports[`Breadcrumb > renders with items correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -107,13 +107,13 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
         <!--v-if-->
       </a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-box</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-link</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-box</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -122,11 +122,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
     <li role="presentation" aria-hidden="true" class="flex">/</li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -135,11 +135,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium hover:text-(--ui-text) transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"
@@ -148,11 +148,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
 exports[`Breadcrumb > renders with ui correctly 1`] = `
 "<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
-    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Home</span></a></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
-    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
-    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-text-muted) cursor-not-allowed opacity-75 font-bold"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" aria-hidden="true" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-(--ui-text-muted)" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary) text-(--ui-primary) font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
 </nav>"

test/components/__snapshots__/Button-vue.spec.ts.snap

@@ -1,285 +1,285 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders with as correctly 1`] = `
-"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with block correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with class correctly 1`] = `
-"<button type="button" class="inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] rounded-full font-bold">
+"<button type="button" class="inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) rounded-full font-bold">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with default slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if-->Default slot
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with disabled and with link correctly 1`] = `
-"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </a>"
 `;
 
 exports[`Button > renders with disabled correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with label correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading and icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with leading slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">Leading slot
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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 type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with loading and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
 </button>"
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant link correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant outline correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant soft correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant solid correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/90 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant ghost correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 focus-visible:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant link correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant outline correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-primary)]/50 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant soft correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 focus-visible:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 focus-visible:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant solid correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant subtle correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25 bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10 focus-visible:ring-2 focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size lg correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size md correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size sm correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xl correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xs correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with square correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with trailing slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
 `;
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>"
 `;
 
 exports[`Button > renders with ui correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate font-bold">Button</span>
   <!--v-if-->
 </button>"

test/components/__snapshots__/Button.spec.ts.snap

@@ -1,285 +1,285 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders with as correctly 1`] = `
-"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Button > renders with avatar and leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with avatar and trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with avatar correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with block correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with class correctly 1`] = `
-"<button type="button" class="inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] rounded-full font-bold">
+"<button type="button" class="inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) rounded-full font-bold">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with default slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if-->Default slot
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with disabled and with link correctly 1`] = `
-"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<a aria-disabled="true" role="link" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </a>"
 `;
 
 exports[`Button > renders with disabled correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with label correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading and icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leading slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">Leading slot
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">Leading slot
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with loading trailing and avatar correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
   <!--v-if--><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with loading trailing correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:refresh-cw shrink-0 size-5 animate-spin" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:sparkles shrink-0 size-5 animate-spin" aria-hidden="true"></span>
+"<button type="button" disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5"><span class="iconify i-lucide:sparkles shrink-0 size-5 animate-spin" aria-hidden="true"></span>
   <!--v-if-->
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant ghost correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant link correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant outline correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant soft correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant solid correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/90 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with neutral variant subtle correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant ghost correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 focus-visible:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant link correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant outline correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-[var(--ui-primary)]/50 text-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant soft correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 focus-visible:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 focus-visible:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant solid correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with primary variant subtle correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 bg-[var(--ui-primary)]/10 hover:bg-[var(--ui-primary)]/15 disabled:bg-[var(--ui-primary)]/10 aria-disabled:bg-[var(--ui-primary)]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25 bg-(--ui-primary)/10 hover:bg-(--ui-primary)/15 disabled:bg-(--ui-primary)/10 aria-disabled:bg-(--ui-primary)/10 focus-visible:ring-2 focus-visible:ring-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size lg correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size md correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size sm correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xl correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with size xs correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with square correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"
 `;
 
 exports[`Button > renders with trailing and icon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with trailing slot correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if-->Trailing slot
 </button>"
 `;
 
 exports[`Button > renders with trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-1.5">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) p-1.5">
   <!--v-if-->
   <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
 </button>"
 `;
 
 exports[`Button > renders with ui correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
   <!--v-if--><span class="truncate font-bold">Button</span>
   <!--v-if-->
 </button>"

test/components/__snapshots__/ButtonGroup-vue.spec.ts.snap

@@ -2,10 +2,10 @@
 
 exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f
 
 exports[`ButtonGroup > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
 
 exports[`ButtonGroup > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
 
 exports[`ButtonGroup > renders with size md correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
 
 exports[`ButtonGroup > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
 
 exports[`ButtonGroup > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
 
 exports[`ButtonGroup > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>

test/components/__snapshots__/ButtonGroup.spec.ts.snap

@@ -2,10 +2,10 @@
 
 exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f
 
 exports[`ButtonGroup > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
 
 exports[`ButtonGroup > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
 
 exports[`ButtonGroup > renders with size md correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
 
 exports[`ButtonGroup > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
 
 exports[`ButtonGroup > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
 
 exports[`ButtonGroup > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
-  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
+  </div> <button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
     <!--v-if--> Click me!
     <!--v-if-->
   </button>

test/components/__snapshots__/Card-vue.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`Card > renders with as correctly 1`] = `
 `;
 
 exports[`Card > renders with class correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] shadow-sm rounded-xl">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) shadow-sm rounded-xl">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <div class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <div class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -41,7 +41,7 @@ exports[`Card > renders with header slot correctly 1`] = `
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->

test/components/__snapshots__/Card.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -9,7 +9,7 @@ exports[`Card > renders with as correctly 1`] = `
 `;
 
 exports[`Card > renders with class correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] shadow-sm rounded-xl">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) shadow-sm rounded-xl">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <div class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <div class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -41,7 +41,7 @@ exports[`Card > renders with header slot correctly 1`] = `
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm">
+"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)] shadow-sm">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->

test/components/__snapshots__/Carousel-vue.spec.ts.snap

@@ -13,10 +13,10 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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-hidden 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>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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>
@@ -105,10 +105,10 @@ exports[`Carousel > renders with next correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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-hidden 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>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary) 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>
@@ -130,10 +130,10 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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-hidden 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>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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>
@@ -171,10 +171,10 @@ exports[`Carousel > renders with prev correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary) 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-hidden 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>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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>
@@ -196,10 +196,10 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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>
+    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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-hidden 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>
+      </button><button type="button" disabled="" aria-label="Next" class="font-medium inline-flex items-center focus:outline-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) 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>

test/components/__snapshots__/Carousel.spec.ts.snap

@@ -13,10 +13,10 @@ exports[`Carousel > renders with arrows correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide: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-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -105,10 +105,10 @@ exports[`Carousel > renders with next correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide: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-hidden 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-lucide: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-hidden 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-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -130,10 +130,10 @@ exports[`Carousel > renders with nextIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide: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-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -171,10 +171,10 @@ exports[`Carousel > renders with prev correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-lucide: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-hidden 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-(--ui-primary)/50 text-(--ui-primary) hover:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-primary) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide: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-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>
@@ -196,10 +196,10 @@ exports[`Carousel > renders with prevIcon correctly 1`] = `
     </div>
   </div>
   <div class="">
-    <div class=""><button type="button" disabled="" aria-label="Prev" class="font-medium inline-flex items-center focus:outline-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -start-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide: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-hidden 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-lucide: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-hidden 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-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5 absolute rounded-full -end-12 top-1/2 -translate-y-1/2"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
         <!--v-if-->
         <!--v-if-->
       </button></div>

test/components/__snapshots__/Checkbox-vue.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox > renders with as correctly 1`] = `
 "<section class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -12,7 +12,7 @@ exports[`Checkbox > renders with as correctly 1`] = `
 
 exports[`Checkbox > renders with class correctly 1`] = `
 "<div class="relative items-start inline-flex">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -22,7 +22,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
 
 exports[`Checkbox > renders with color neutral correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)] size-4 ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) size-4 ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!---->
     </button></div>
   <!--v-if-->
@@ -31,7 +31,7 @@ exports[`Checkbox > renders with color neutral correctly 1`] = `
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!---->
     </button></div>
   <!--v-if-->
@@ -40,23 +40,23 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 
 exports[`Checkbox > renders with description correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label</label>
-    <p class="text-[var(--ui-text-muted)]">Description</p>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label</label>
+    <p class="text-(--ui-text-muted)">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -64,7 +64,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!---->
     </button></div>
@@ -74,7 +74,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 
 exports[`Checkbox > renders with icon correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -84,7 +84,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 
 exports[`Checkbox > renders with id correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -94,7 +94,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!---->
     </button></div>
   <!--v-if-->
@@ -103,7 +103,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="indeterminate" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!---->
     </button></div>
   <!--v-if-->
@@ -112,11 +112,11 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 
 exports[`Checkbox > renders with label correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label</label>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -124,11 +124,11 @@ exports[`Checkbox > renders with label correctly 1`] = `
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -136,7 +136,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" data-state="checked" style="pointer-events: none;" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!---->
     </button></div>
   <!--v-if-->
@@ -145,7 +145,7 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 
 exports[`Checkbox > renders with name correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -155,11 +155,11 @@ exports[`Checkbox > renders with name correctly 1`] = `
 
 exports[`Checkbox > renders with required correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!---->
     </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>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -167,7 +167,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -177,7 +177,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 
 exports[`Checkbox > renders with size md correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -187,7 +187,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -197,7 +197,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -207,7 +207,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -217,7 +217,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 
 exports[`Checkbox > renders with ui correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -227,7 +227,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 
 exports[`Checkbox > renders with value correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>

test/components/__snapshots__/Checkbox.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox > renders with as correctly 1`] = `
 "<section class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -12,7 +12,7 @@ exports[`Checkbox > renders with as correctly 1`] = `
 
 exports[`Checkbox > renders with class correctly 1`] = `
 "<div class="relative items-start inline-flex">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -22,7 +22,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
 
 exports[`Checkbox > renders with color neutral correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)] size-4 ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted) size-4 ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -31,7 +31,7 @@ exports[`Checkbox > renders with color neutral correctly 1`] = `
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -40,23 +40,23 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 
 exports[`Checkbox > renders with description correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
-    <p class="text-[var(--ui-text-muted)]">Description</p>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
+    <p class="text-(--ui-text-muted)">Description</p>
   </div>
 </div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -64,7 +64,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!---->
     </button></div>
@@ -74,7 +74,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 
 exports[`Checkbox > renders with icon correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -84,7 +84,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 
 exports[`Checkbox > renders with id correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -94,7 +94,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -103,7 +103,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="indeterminate"></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -112,11 +112,11 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 
 exports[`Checkbox > renders with label correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label</label>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -124,11 +124,11 @@ exports[`Checkbox > renders with label correctly 1`] = `
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -136,7 +136,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 ring-2 ring-[var(--ui-primary)] bg-[var(--ui-primary)]" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 ring-2 ring-(--ui-primary) bg-(--ui-primary)" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" style="pointer-events: none;" data-state="checked"></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -145,7 +145,7 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 
 exports[`Checkbox > renders with name correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -155,11 +155,11 @@ exports[`Checkbox > renders with name correctly 1`] = `
 
 exports[`Checkbox > renders with required correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!---->
     </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>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -167,7 +167,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -177,7 +177,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 
 exports[`Checkbox > renders with size md correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -187,7 +187,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -197,7 +197,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-6"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -207,7 +207,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-4"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -217,7 +217,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 
 exports[`Checkbox > renders with ui correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
@@ -227,7 +227,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 
 exports[`Checkbox > renders with value correctly 1`] = `
 "<div class="relative flex items-start">
-  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>

test/components/__snapshots__/Chip-vue.spec.ts.snap

@@ -1,46 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
+exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
 
-exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-text-muted)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-text-muted) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
+exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
 
-exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
+exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
 
-exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
+exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
 
-exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-[var(--ui-text-muted)]"></span></div>"`;
+exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-(--ui-text-muted)"></span></div>"`;
 
 exports[`Chip > renders without show correctly 1`] = `
 "<div class="relative inline-flex items-center justify-center shrink-0">

test/components/__snapshots__/Chip.spec.ts.snap

@@ -1,46 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
+exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
 
-exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-text-muted)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with color neutral correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-text-muted) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
+exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
 
-exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
+exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute"></span></div>"`;
 
-exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] bottom-0 left-0 absolute translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] bottom-0 right-0 absolute translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 left-0 absolute -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[11px] min-w-[11px] text-[11px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[5px] min-w-[5px] text-[5px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[12px] min-w-[12px] text-[12px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[4px] min-w-[4px] text-[4px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[9px] min-w-[9px] text-[9px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[7px] min-w-[7px] text-[7px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[10px] min-w-[10px] text-[10px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[6px] min-w-[6px] text-[6px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
 
-exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
+exports[`Chip > renders with text correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform">Text</span></div>"`;
 
-exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-[var(--ui-text-muted)]"></span></div>"`;
+exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="rounded-full ring ring-(--ui-bg) flex items-center justify-center font-medium whitespace-nowrap bg-(--ui-primary) h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform text-(--ui-text-muted)"></span></div>"`;
 
 exports[`Chip > renders without show correctly 1`] = `
 "<div class="relative inline-flex items-center justify-center shrink-0">

test/components/__snapshots__/Collapsible-vue.spec.ts.snap

@@ -43,7 +43,7 @@ exports[`Collapsible > renders with open correctly 1`] = `
 exports[`Collapsible > renders with ui correctly 1`] = `
 "<div data-state="open">
   <!--v-if-->
-  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-[var(--ui-bg-elevated)]" id="reka-collapsible-content-v-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-(--ui-bg-elevated)" id="reka-collapsible-content-v-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 

test/components/__snapshots__/Collapsible.spec.ts.snap

@@ -43,7 +43,7 @@ exports[`Collapsible > renders with open correctly 1`] = `
 exports[`Collapsible > renders with ui correctly 1`] = `
 "<div data-state="open">
   <!--v-if-->
-  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-[var(--ui-bg-elevated)]" id="reka-collapsible-content-v-0-0-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-(--ui-bg-elevated)" id="reka-collapsible-content-v-0-0-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;"></div>
 </div>"
 `;
 

test/components/__snapshots__/ColorPicker-vue.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
@@ -20,11 +20,11 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -35,11 +35,11 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
@@ -50,11 +50,11 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -65,11 +65,11 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -80,11 +80,11 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
@@ -95,11 +95,11 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF6F;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
 </div>"
@@ -110,11 +110,11 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -125,11 +125,11 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -140,11 +140,11 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -155,11 +155,11 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -170,11 +170,11 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -185,11 +185,11 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-4">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -200,11 +200,11 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-c9a043d6="" class="flex gap-8">
     <div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"

test/components/__snapshots__/ColorPicker.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`ColorPicker > renders with as correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </section>"
@@ -20,11 +20,11 @@ exports[`ColorPicker > renders with class correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -35,11 +35,11 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
     </div>
   </div>
 </div>"
@@ -50,11 +50,11 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -65,11 +65,11 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -80,11 +80,11 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
     </div>
   </div>
 </div>"
@@ -95,11 +95,11 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF6F;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
     </div>
   </div>
 </div>"
@@ -110,11 +110,11 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
     </div>
   </div>
 </div>"
@@ -125,11 +125,11 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -140,11 +140,11 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -155,11 +155,11 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -170,11 +170,11 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -185,11 +185,11 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-4">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"
@@ -200,11 +200,11 @@ exports[`ColorPicker > renders with ui correctly 1`] = `
   <div data-v-d6f23756="" class="flex gap-8">
     <div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
       <div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
-        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+        <div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
       </div>
     </div>
     <div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
-      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+      <div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
     </div>
   </div>
 </div>"

test/components/__snapshots__/Container-vue.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Container > renders with as correctly 1`] = `"<article class="max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8"></article>"`;
+exports[`Container > renders with as correctly 1`] = `"<article class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"></article>"`;
 
-exports[`Container > renders with class correctly 1`] = `"<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl"></div>"`;
+exports[`Container > renders with class correctly 1`] = `"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl"></div>"`;
 
-exports[`Container > renders with default slot correctly 1`] = `"<div class="max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8">Default slot</div>"`;
+exports[`Container > renders with default slot correctly 1`] = `"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8">Default slot</div>"`;

test/components/__snapshots__/Container.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Container > renders with as correctly 1`] = `"<article class="max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8"></article>"`;
+exports[`Container > renders with as correctly 1`] = `"<article class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"></article>"`;
 
-exports[`Container > renders with class correctly 1`] = `"<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl"></div>"`;
+exports[`Container > renders with class correctly 1`] = `"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl"></div>"`;
 
-exports[`Container > renders with default slot correctly 1`] = `"<div class="max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8">Default slot</div>"`;
+exports[`Container > renders with default slot correctly 1`] = `"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8">Default slot</div>"`;

test/components/__snapshots__/ContextMenu-vue.spec.ts.snap

@@ -7,8 +7,8 @@ exports[`ContextMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -16,23 +16,23 @@ exports[`ContextMenu > renders with class correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -55,8 +55,8 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -64,23 +64,23 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -103,8 +103,8 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -112,23 +112,23 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -164,16 +164,16 @@ exports[`ContextMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
@@ -194,8 +194,8 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -203,23 +203,23 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -242,20 +242,20 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">Item leading slot<span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">Item leading slot<span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
@@ -276,8 +276,8 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
       <!---->
@@ -285,21 +285,21 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
         <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
       <!---->
@@ -322,8 +322,8 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -331,23 +331,23 @@ exports[`ContextMenu > renders with items correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -370,8 +370,8 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
@@ -380,29 +380,29 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
         <!--v-if-->
-        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
-        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
@@ -426,8 +426,8 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -435,23 +435,23 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-sm gap-2 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-sm gap-2 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -474,8 +474,8 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -483,23 +483,23 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -522,8 +522,8 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -531,23 +531,23 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -570,8 +570,8 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -579,23 +579,23 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-base gap-2 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-base gap-2 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⇧</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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -618,8 +618,8 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -627,23 +627,23 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1 text-xs gap-1 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1 text-xs gap-1 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span>
       </button>
       <!---->
@@ -666,8 +666,8 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->
@@ -675,23 +675,23 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
       </button>
       <!---->

test/components/__snapshots__/ContextMenu.spec.ts.snap

@@ -7,8 +7,8 @@ exports[`ContextMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -17,23 +17,23 @@ exports[`ContextMenu > renders with class correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -57,8 +57,8 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -67,23 +67,23 @@ exports[`ContextMenu > renders with custom slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -107,8 +107,8 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -117,23 +117,23 @@ exports[`ContextMenu > renders with default slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -170,16 +170,16 @@ exports[`ContextMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
@@ -200,8 +200,8 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -210,23 +210,23 @@ exports[`ContextMenu > renders with item-label slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -250,8 +250,8 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
@@ -259,13 +259,13 @@ exports[`ContextMenu > renders with item-leading slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">Item leading slot<span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">Item leading slot<span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
@@ -288,8 +288,8 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
       <!---->
@@ -297,21 +297,21 @@ exports[`ContextMenu > renders with item-trailing slot correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
         <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span>
       </button>
       <!---->
@@ -334,8 +334,8 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -344,23 +344,23 @@ exports[`ContextMenu > renders with items correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -384,8 +384,8 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
@@ -395,29 +395,29 @@ exports[`ContextMenu > renders with labelKey correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
         <!--v-if-->
-        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
-        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+        <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if-->
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
@@ -442,8 +442,8 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -452,23 +452,23 @@ exports[`ContextMenu > renders with size lg correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-sm gap-2 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-sm gap-2 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -492,8 +492,8 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -502,23 +502,23 @@ exports[`ContextMenu > renders with size md correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -542,8 +542,8 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -552,23 +552,23 @@ exports[`ContextMenu > renders with size sm correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -592,8 +592,8 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -602,23 +602,23 @@ exports[`ContextMenu > renders with size xl correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-base gap-2 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-base gap-2 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⇧</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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -642,8 +642,8 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -652,23 +652,23 @@ exports[`ContextMenu > renders with size xs correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1 text-xs gap-1 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1 text-xs gap-1 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -692,8 +692,8 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
-    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-context-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-context-menu-content-available-width: var(--reka-popper-available-width); --reka-context-menu-content-available-height: var(--reka-popper-available-height); --reka-context-menu-trigger-width: var(--reka-popper-anchor-width); --reka-context-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="right" data-align="start">
+    <div role="group" class="p-1 isolate"><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Appearance<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
@@ -702,23 +702,23 @@ exports[`ContextMenu > renders with ui correctly 1`] = `
       <!---->
       <!--teleport end-->
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10">
-        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">S</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10">
+        <!--v-if--><span class="truncate">Show Sidebar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">S</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
-        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">D</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+        <!--v-if--><span class="truncate">Show Toolbar<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">D</kbd></span>
         <!----></span>
-      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Collapse Pinned Tabs<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Refresh the Page<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cookies and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">
         <!--v-if--><span class="truncate">Clear Cache and Refresh<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </button>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">
         <!--v-if--><span class="truncate">Developer<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>

test/components/__snapshots__/Drawer-vue.spec.ts.snap

@@ -5,9 +5,9 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div class="flex-1">Body slot</div>
@@ -24,9 +24,9 @@ exports[`Drawer > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-[var(--ui-bg-elevated)]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-(--ui-bg-elevated)">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -43,9 +43,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>Content slot
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
 </div>
 
 
@@ -57,9 +57,9 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -76,13 +76,13 @@ exports[`Drawer > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -98,13 +98,13 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <!--v-if-->
-      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -120,9 +120,9 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -139,9 +139,9 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
     <!--v-if-->
@@ -158,13 +158,13 @@ exports[`Drawer > renders with left direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -180,13 +180,13 @@ exports[`Drawer > renders with right direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -202,12 +202,12 @@ exports[`Drawer > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -224,12 +224,12 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -246,13 +246,13 @@ exports[`Drawer > renders with top direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mb-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -268,9 +268,9 @@ exports[`Drawer > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 h-1.5 mx-auto w-20"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -287,13 +287,13 @@ exports[`Drawer > renders without handle correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
   <!--v-if-->
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -310,12 +310,12 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->

test/components/__snapshots__/Drawer.spec.ts.snap

@@ -5,9 +5,9 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div class="flex-1">Body slot</div>
@@ -24,9 +24,9 @@ exports[`Drawer > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-[var(--ui-bg-elevated)]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-(--ui-bg-elevated)">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -43,9 +43,9 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>Content slot
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>Content slot
 </div>
 
 
@@ -57,9 +57,9 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -76,13 +76,13 @@ exports[`Drawer > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -98,13 +98,13 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <!--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>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description slot</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -120,9 +120,9 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -139,9 +139,9 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
     <!--v-if-->
@@ -158,13 +158,13 @@ exports[`Drawer > renders with left direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -180,13 +180,13 @@ exports[`Drawer > renders with right direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -202,12 +202,12 @@ exports[`Drawer > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -224,12 +224,12 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title slot</h2>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -246,13 +246,13 @@ exports[`Drawer > renders with top direction correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mb-4 w-12 h-1.5 mx-auto"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mb-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -268,9 +268,9 @@ exports[`Drawer > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 h-1.5 mx-auto w-20"></div>
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 h-1.5 mx-auto w-20"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
@@ -287,13 +287,13 @@ exports[`Drawer > renders without handle correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
   <!--v-if-->
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->
@@ -310,12 +310,12 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
-  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" 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" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-(--ui-bg-accented) mt-4 w-12 h-1.5 mx-auto"></div>
   <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
-      <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>
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
     </div>
     <!--v-if-->
     <!--v-if-->

test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap

@@ -7,29 +7,29 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
-      </button></div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+      </button></div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-(--ui-border)" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -45,27 +45,27 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -83,27 +83,27 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -121,27 +121,27 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-1" aria-labelledby="reka-dropdown-menu-trigger-v-0" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -159,27 +159,27 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -197,21 +197,21 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.5">Item slot</div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5">Item slot</div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10">Item slot</button></div>
   </div>
 </div>
 
@@ -227,27 +227,27 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -265,27 +265,27 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item leading slot<span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10">Item leading slot<span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -303,21 +303,21 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
   </div>
 </div>
 
@@ -333,27 +333,27 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -371,29 +371,29 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-user<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-credit-card<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-user<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-credit-card<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-cog<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-cog<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-user-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-user-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-life-buoy<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-life-buoy<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-log-out<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-log-out<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -411,27 +411,27 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-2 text-sm gap-2"><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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-sm gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-sm gap-2 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -449,27 +449,27 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -487,27 +487,27 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -525,27 +525,27 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-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)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-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-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-base gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-6 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⇧</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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-base gap-2 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-6 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -563,27 +563,27 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!----></span></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1 text-xs gap-1 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1 text-xs gap-1 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -601,27 +601,27 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error) size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>

test/components/__snapshots__/DropdownMenu.spec.ts.snap

@@ -7,31 +7,31 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
-      </button></div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
+      </button></div><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-(--ui-border)" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span>
   </div>
 </div>
 
@@ -47,29 +47,29 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -87,29 +87,29 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Custom slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -127,29 +127,29 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-1" aria-labelledby="reka-dropdown-menu-trigger-v-0-0-0" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -167,29 +167,29 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -207,21 +207,21 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.5">Item slot</div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5">Item slot</div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item slot</button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item slot</button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10">Item slot</button></div>
   </div>
 </div>
 
@@ -237,29 +237,29 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -277,29 +277,29 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="">Item leading slot<span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item leading slot<span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10">Item leading slot<span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -317,21 +317,21 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
   </div>
 </div>
 
@@ -347,29 +347,29 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -387,31 +387,31 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span>
         <!--v-if--><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span>
       </div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-credit-card<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-credit-card<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-cog<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-cog<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-user-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-plus<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-life-buoy<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-life-buoy<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">i-lucide-log-out<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">i-lucide-log-out<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -429,29 +429,29 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-2 text-sm gap-2"><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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-sm gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-sm gap-2"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-sm gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-sm gap-2 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -469,29 +469,29 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-5" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-5 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -509,29 +509,29 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-xs gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -549,29 +549,29 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-2 text-base gap-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-6 text-xs shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-2 text-base gap-2"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-6" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-base gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-6 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><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-6 min-w-[24px] text-[12px]">⇧</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-6 min-w-[24px] text-[12px]">⊞</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-6 min-w-[24px] text-[12px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-2 text-base gap-2 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-6 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -589,29 +589,29 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1 text-xs gap-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1 text-xs gap-1"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1 text-xs gap-1 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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]">⊞</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]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1 text-xs gap-1 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors size-4 text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>
@@ -629,29 +629,29 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
+  <div role="menu" aria-orientation="vertical" data-reka-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; pointer-events: auto; --reka-dropdown-menu-content-transform-origin: var(--reka-popper-transform-origin); --reka-dropdown-menu-content-available-width: var(--reka-popper-available-width); --reka-dropdown-menu-content-available-height: var(--reka-popper-available-height); --reka-dropdown-menu-trigger-width: var(--reka-popper-anchor-width); --reka-dropdown-menu-trigger-height: var(--reka-popper-anchor-height); animation: none;" data-dismissable-layer="" id="reka-dropdown-menu-content-v-0-0-0" aria-labelledby="" class="min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-side="bottom" data-align="center">
     <div role="group" class="p-1 isolate">
-      <div class="w-full flex items-center font-semibold text-[var(--ui-text-highlighted)] p-1.5 text-sm gap-1.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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
+      <div class="w-full flex items-center font-semibold text-(--ui-text-highlighted) p-1.5 text-sm gap-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span><span class="truncate">My account<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></div>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">B</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:user shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Profile<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:credit-card shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Billing<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">B</kbd></span>
         <!----></span>
-      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">?</kbd></span>
+      </button><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:cog shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Settings<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">?</kbd></span>
         <!----></span>
       </button></div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:users shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button role="menuitem" tabindex="-1" id="reka-menu-sub-trigger-v-0-0-1" aria-haspopup="menu" aria-expanded="false" aria-controls="" data-state="closed" type="button" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item=""><span class="iconify i-lucide:user-plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Invite users<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
         <!----></span>
       </button>
       <!---->
       <!--teleport start-->
       <!---->
-      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">N</kbd></span>
+      <!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:plus shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">N</kbd></span>
         <!----></span>
       </button>
     </div>
-    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
-      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
+    <div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-simple-icons:github shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:life-buoy shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
+      <div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-(--ui-border)"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:key-round shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><span class="iconify i-lucide:box shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text) transition-colors size-4" aria-hidden="true"></span><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
     </div>
-    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)] size-4" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-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-5 min-w-[20px] text-[11px]">⇧</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-5 min-w-[20px] text-[11px]">⊞</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-5 min-w-[20px] text-[11px]">Q</kbd></span>
+    <div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-(--ui-text-highlighted) transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10"><span class="iconify i-lucide:log-out shrink-0 transition-colors text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error) size-4" aria-hidden="true"></span><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Q</kbd></span>
         <!----></span>
       </button></div>
   </div>

test/components/__snapshots__/Form-vue.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -21,11 +21,11 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -83,11 +83,11 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -136,7 +136,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -149,11 +149,11 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -167,7 +167,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -180,7 +180,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -198,7 +198,7 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -211,11 +211,11 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -229,7 +229,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -242,7 +242,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -260,7 +260,7 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -273,11 +273,11 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -291,7 +291,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -304,7 +304,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -322,7 +322,7 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -335,11 +335,11 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -353,7 +353,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -366,7 +366,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -384,7 +384,7 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -397,11 +397,11 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -415,7 +415,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -428,7 +428,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>

test/components/__snapshots__/Form.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -21,11 +21,11 @@ exports[`Form > custom validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -39,7 +39,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -52,7 +52,7 @@ exports[`Form > custom validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -70,7 +70,7 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -83,11 +83,11 @@ exports[`Form > joi validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -101,7 +101,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -114,7 +114,7 @@ exports[`Form > joi validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -136,7 +136,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -149,11 +149,11 @@ exports[`Form > superstruct validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -167,7 +167,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -180,7 +180,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -198,7 +198,7 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -211,11 +211,11 @@ exports[`Form > valibot safeParser validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -229,7 +229,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -242,7 +242,7 @@ exports[`Form > valibot safeParser validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -260,7 +260,7 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -273,11 +273,11 @@ exports[`Form > valibot validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -291,7 +291,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -304,7 +304,7 @@ exports[`Form > valibot validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -322,7 +322,7 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -335,11 +335,11 @@ exports[`Form > yup validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -353,7 +353,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -366,7 +366,7 @@ exports[`Form > yup validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -384,7 +384,7 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -397,11 +397,11 @@ exports[`Form > zod validation works > with error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error) ring ring-inset ring-(--ui-error)" aria-describedby="v-0-0-1-error" aria-invalid="true" value="short">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <p id="v-0-0-1-error" class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
+      <p id="v-0-0-1-error" class="mt-2 text-(--ui-error)">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -415,7 +415,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[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)]" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
+      <div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off" aria-describedby="" aria-invalid="false" value="bob@dylan.com">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -428,7 +428,7 @@ exports[`Form > zod validation works > without error 1`] = `
       <!--v-if-->
     </div>
     <div class="">
-      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" 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)]" aria-describedby="" aria-invalid="false" value="validpassword">
+      <div class="relative inline-flex items-center"><input id="password" type="text" name="password" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-describedby="" aria-invalid="false" value="validpassword">
         <!--v-if-->
         <!--v-if-->
       </div>

test/components/__snapshots__/FormField-vue.spec.ts.snap

@@ -40,7 +40,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
 "<div class="text-sm">
   <div class="">
     <!--v-if-->
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Description slot</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Description slot</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Username is already taken</p>
+    <p id="v-0-0-error" class="mt-2 text-(--ui-error)">Username is already taken</p>
   </div>
 </div>"
 `;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Error slot</p>
+    <p id="v-0-0-error" class="mt-2 text-(--ui-error)">Error slot</p>
   </div>
 </div>"
 `;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-[var(--ui-text-muted)]">Username must be unique</p>
+    <p class="mt-2 text-(--ui-text-muted)">Username must be unique</p>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-[var(--ui-text-muted)]">Help slot</p>
+    <p class="mt-2 text-(--ui-text-muted)">Help slot</p>
   </div>
 </div>"
 `;
@@ -123,10 +123,10 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 exports[`FormField > renders with label and description correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -137,7 +137,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 exports[`FormField > renders with label slot correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -151,7 +151,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)] after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -165,10 +165,10 @@ exports[`FormField > renders with required correctly 1`] = `
 exports[`FormField > renders with size lg correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -179,10 +179,10 @@ exports[`FormField > renders with size lg correctly 1`] = `
 exports[`FormField > renders with size md correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -193,10 +193,10 @@ exports[`FormField > renders with size md correctly 1`] = `
 exports[`FormField > renders with size sm correctly 1`] = `
 "<div class="text-xs">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -207,10 +207,10 @@ exports[`FormField > renders with size sm correctly 1`] = `
 exports[`FormField > renders with size xl correctly 1`] = `
 "<div class="text-base">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -221,10 +221,10 @@ exports[`FormField > renders with size xl correctly 1`] = `
 exports[`FormField > renders with size xs correctly 1`] = `
 "<div class="text-xs">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->

test/components/__snapshots__/FormField.spec.ts.snap

@@ -40,7 +40,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
 "<div class="text-sm">
   <div class="">
     <!--v-if-->
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Description slot</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Description slot</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Username is already taken</p>
+    <p id="v-0-0-error" class="mt-2 text-(--ui-error)">Username is already taken</p>
   </div>
 </div>"
 `;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p id="v-0-0-error" class="mt-2 text-[var(--ui-error)]">Error slot</p>
+    <p id="v-0-0-error" class="mt-2 text-(--ui-error)">Error slot</p>
   </div>
 </div>"
 `;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-[var(--ui-text-muted)]">Username must be unique</p>
+    <p class="mt-2 text-(--ui-text-muted)">Username must be unique</p>
   </div>
 </div>"
 `;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
     <!--v-if-->
   </div>
   <div class="">
-    <p class="mt-2 text-[var(--ui-text-muted)]">Help slot</p>
+    <p class="mt-2 text-(--ui-text-muted)">Help slot</p>
   </div>
 </div>"
 `;
@@ -123,10 +123,10 @@ exports[`FormField > renders with hint slot correctly 1`] = `
 exports[`FormField > renders with label and description correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -137,7 +137,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
 exports[`FormField > renders with label slot correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label slot</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -151,7 +151,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)] after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -165,10 +165,10 @@ exports[`FormField > renders with required correctly 1`] = `
 exports[`FormField > renders with size lg correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -179,10 +179,10 @@ exports[`FormField > renders with size lg correctly 1`] = `
 exports[`FormField > renders with size md correctly 1`] = `
 "<div class="text-sm">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -193,10 +193,10 @@ exports[`FormField > renders with size md correctly 1`] = `
 exports[`FormField > renders with size sm correctly 1`] = `
 "<div class="text-xs">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -207,10 +207,10 @@ exports[`FormField > renders with size sm correctly 1`] = `
 exports[`FormField > renders with size xl correctly 1`] = `
 "<div class="text-base">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->
@@ -221,10 +221,10 @@ exports[`FormField > renders with size xl correctly 1`] = `
 exports[`FormField > renders with size xs correctly 1`] = `
 "<div class="text-xs">
   <div class="">
-    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-[var(--ui-text)]">Username</label>
+    <div class="flex content-center items-center justify-between"><label for="v-0-0" class="block font-medium text-(--ui-text)">Username</label>
       <!--v-if-->
     </div>
-    <p id="v-0-0-description" class="text-[var(--ui-text-muted)]">Enter your username</p>
+    <p id="v-0-0-description" class="text-(--ui-text-muted)">Enter your username</p>
   </div>
   <div class="mt-1 relative">
     <!--v-if-->

test/components/__snapshots__/Input-vue.spec.ts.snap

@@ -1,264 +1,264 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input > renders with as correctly 1`] = `
-"<section 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)]" autocomplete="off">
+"<section class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--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-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute"><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)]" autocomplete="off">
+"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">Default slot
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" disabled="" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" disabled="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 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: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">
+"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--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-(--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)] 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 class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] 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>
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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 name correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" name="name" 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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant ghost 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-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant none 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-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant outline 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-border-inverted)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant soft 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-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant subtle 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-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-elevated)] ring ring-inset ring-[var(--ui-border-accented)] 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="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" required="" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" required="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-xs gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-3 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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 class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--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)] pe-9" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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)] 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 class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
 </div>"
 `;
 
 exports[`Input > renders with type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="password" 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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 placeholder: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)] rounded-full" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"

test/components/__snapshots__/Input.spec.ts.snap

@@ -1,264 +1,264 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input > renders with as correctly 1`] = `
-"<section 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)]" autocomplete="off">
+"<section class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </section>"
 `;
 
 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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--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-lucide:arrow-right shrink-0 text-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute"><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)]" autocomplete="off">
+"<div class="inline-flex items-center absolute"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">Default slot
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">Default slot
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" disabled="" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" disabled="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 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: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">
+"<div class="relative inline-flex items-center"><input type="file" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input id="id" type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:refresh-cw 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:refresh-cw 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--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)] 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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" 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-lucide:refresh-cw 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--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-lucide:refresh-cw shrink-0 text-(--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)] pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw 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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" autocomplete="off">
+  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:refresh-cw shrink-0 text-(--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)] ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9" autocomplete="off"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:sparkles shrink-0 text-(--ui-text-dimmed) size-5 animate-spin" aria-hidden="true"></span></span>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" name="name" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant ghost 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-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant none 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-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant outline 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-border-inverted)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant soft 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-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with neutral variant subtle 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-elevated)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-transparent" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-transparent" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-elevated)] ring ring-inset ring-[var(--ui-border-accented)] 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="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" required="" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" required="" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-3 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-xs gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-3 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[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-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" autocomplete="off">
+  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--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)] pe-9" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) 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)] pe-9" autocomplete="off">
-  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide: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-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" autocomplete="off">
+  <!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span>
 </div>"
 `;
 
 exports[`Input > renders with type correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-[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)]" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="password" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Input > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 placeholder: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)] rounded-full" autocomplete="off">
+"<div class="relative inline-flex items-center"><input type="text" class="w-full border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" autocomplete="off">
   <!--v-if-->
   <!--v-if-->
 </div>"

test/components/__snapshots__/InputNumber-vue.spec.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -15,12 +15,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -29,8 +29,8 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -40,12 +40,12 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -54,12 +54,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" aria-label="Increment" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" aria-label="Increment" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" aria-label="Decrement" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" aria-label="Decrement" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -68,9 +68,9 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -79,12 +79,12 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -93,12 +93,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -107,12 +107,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -121,12 +121,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -135,12 +135,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -149,12 +149,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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 text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -163,12 +163,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -177,12 +177,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with orientation vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" value="">
+  <div class="absolute flex items-center top-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -191,12 +191,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -205,12 +205,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -219,12 +219,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -233,12 +233,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -247,12 +247,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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 text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -261,12 +261,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -275,12 +275,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -289,12 +289,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-10" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-10" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-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>
@@ -303,12 +303,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
@@ -317,12 +317,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-8" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-8" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -331,12 +331,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-11" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-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-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-11" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-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-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-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-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-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-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -345,12 +345,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-7" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-7" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -359,12 +359,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9 rounded-full" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9 rounded-full" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>

test/components/__snapshots__/InputNumber.spec.ts.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -15,12 +15,12 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -29,8 +29,8 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -40,12 +40,12 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -54,12 +54,12 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" aria-label="Increment" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" aria-label="Increment" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" aria-label="Decrement" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" disabled="" aria-label="Decrement" tabindex="-1" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -68,9 +68,9 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -79,12 +79,12 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -93,12 +93,12 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -107,12 +107,12 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -121,12 +121,12 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -135,12 +135,12 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -149,12 +149,12 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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 text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -163,12 +163,12 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -177,12 +177,12 @@ exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with orientation vertical correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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" value="">
-  <div class="absolute flex items-center top-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--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-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9" value="">
+  <div class="absolute flex items-center top-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -191,12 +191,12 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -205,12 +205,12 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -219,12 +219,12 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-transparent text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-transparent text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -233,12 +233,12 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -247,12 +247,12 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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 text-center px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 text-center px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -261,12 +261,12 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -275,12 +275,12 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -289,12 +289,12 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-2 text-sm gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-10" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-10" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-2"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -303,12 +303,12 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -317,12 +317,12 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 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)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-8" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-xs gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-8" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -331,12 +331,12 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-2 text-base gap-2 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-11" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-base gap-2 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-11" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-2"><span class="iconify i-lucide:minus shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -345,12 +345,12 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" 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 py-1 text-xs gap-1 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-7" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1 text-xs gap-1 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-7" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1"><span class="iconify i-lucide:minus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
@@ -359,12 +359,12 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] px-9 rounded-full" value="">
-  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) px-9 rounded-full" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" aria-label="Increment" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>
-  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden 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-primary)] hover:text-[var(--ui-primary)]/75 disabled:text-[var(--ui-primary)] aria-disabled:text-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" aria-label="Decrement" tabindex="-1" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-primary) hover:text-(--ui-primary)/75 disabled:text-(--ui-primary) aria-disabled:text-(--ui-primary) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>

test/components/__snapshots__/Kbd-vue.spec.ts.snap

@@ -1,21 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Kbd > renders with as correctly 1`] = `"<span 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-5 min-w-[20px] text-[11px]">K</span>"`;
+exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</span>"`;
 
-exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
+exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
 
-exports[`Kbd > renders with default slot correctly 1`] = `"<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-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
+exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
 
-exports[`Kbd > renders with size lg correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-6 min-w-[24px] text-[12px]">K</kbd>"`;
+exports[`Kbd > renders with size lg correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">K</kbd>"`;
 
-exports[`Kbd > renders with size md correctly 1`] = `"<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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with size sm correctly 1`] = `"<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>"`;
+exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">K</kbd>"`;
 
-exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant outline correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant outline correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant solid correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)] h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant solid correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg-inverted) text-(--ui-bg) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant subtle correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant subtle correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;

test/components/__snapshots__/Kbd.spec.ts.snap

@@ -1,21 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Kbd > renders with as correctly 1`] = `"<span 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-5 min-w-[20px] text-[11px]">K</span>"`;
+exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</span>"`;
 
-exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
+exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
 
-exports[`Kbd > renders with default slot correctly 1`] = `"<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-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
+exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
 
-exports[`Kbd > renders with size lg correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-6 min-w-[24px] text-[12px]">K</kbd>"`;
+exports[`Kbd > renders with size lg correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-6 min-w-[24px] text-[12px]">K</kbd>"`;
 
-exports[`Kbd > renders with size md correctly 1`] = `"<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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with size sm correctly 1`] = `"<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>"`;
+exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-4 min-w-[16px] text-[10px]">K</kbd>"`;
 
-exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant outline correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[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-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant outline correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant solid correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)] h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant solid correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg-inverted) text-(--ui-bg) h-5 min-w-[20px] text-[11px]">K</kbd>"`;
 
-exports[`Kbd > renders with variant subtle correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">K</kbd>"`;
+exports[`Kbd > renders with variant subtle correctly 1`] = `"<kbd class="inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented) h-5 min-w-[20px] text-[11px]">K</kbd>"`;

test/components/__snapshots__/Link-vue.spec.ts.snap

@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-highlighted)]"></button>"`;
+exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-highlighted)"></button>"`;
 
-exports[`Link > renders with as correctly 1`] = `"<div class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></div>"`;
+exports[`Link > renders with as correctly 1`] = `"<div class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></div>"`;
 
-exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-medium"></button>"`;
+exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-medium"></button>"`;
 
-exports[`Link > renders with default slot correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors">Default slot</button>"`;
+exports[`Link > renders with default slot correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors">Default slot</button>"`;
 
-exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors cursor-not-allowed opacity-75"></button>"`;
+exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors cursor-not-allowed opacity-75"></button>"`;
 
-exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-primary)]"></button>"`;
+exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) transition-colors hover:text-(--ui-primary)"></button>"`;
 
 exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;
 
-exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></a>"`;
+exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></a>"`;
 
-exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></button>"`;
+exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></button>"`;

test/components/__snapshots__/Link.spec.ts.snap

@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-highlighted)]"></button>"`;
+exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-highlighted)"></button>"`;
 
-exports[`Link > renders with as correctly 1`] = `"<div class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></div>"`;
+exports[`Link > renders with as correctly 1`] = `"<div class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></div>"`;
 
-exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-medium"></button>"`;
+exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors font-medium"></button>"`;
 
-exports[`Link > renders with default slot correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors">Default slot</button>"`;
+exports[`Link > renders with default slot correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors">Default slot</button>"`;
 
-exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors cursor-not-allowed opacity-75"></button>"`;
+exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors cursor-not-allowed opacity-75"></button>"`;
 
-exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-primary)]"></button>"`;
+exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) transition-colors hover:text-(--ui-primary)"></button>"`;
 
 exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;
 
-exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></a>"`;
+exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></a>"`;
 
-exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors"></button>"`;
+exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-(--ui-primary) text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"></button>"`;

test/components/__snapshots__/Modal-vue.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -27,11 +27,11 @@ exports[`Modal > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border) bg-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -49,8 +49,8 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if-->Close slot
@@ -68,11 +68,11 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -90,8 +90,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">Content slot</div>
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">Content slot</div>
 
 
 <!--teleport end-->"
@@ -102,11 +102,11 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -124,11 +124,11 @@ exports[`Modal > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -146,11 +146,11 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
-    <p id="reka-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-hidden 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>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -168,11 +168,11 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -190,11 +190,11 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -212,8 +212,8 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -228,11 +228,11 @@ exports[`Modal > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -250,11 +250,11 @@ exports[`Modal > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -272,11 +272,11 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -294,11 +294,11 @@ exports[`Modal > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -316,11 +316,11 @@ exports[`Modal > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -336,10 +336,10 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -357,11 +357,11 @@ exports[`Modal > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>

test/components/__snapshots__/Modal.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`Modal > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -27,11 +27,11 @@ exports[`Modal > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)] bg-[var(--ui-bg-elevated)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border) bg-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -49,8 +49,8 @@ exports[`Modal > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
     <!--v-if-->Close slot
@@ -68,11 +68,11 @@ exports[`Modal > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide: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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -90,8 +90,8 @@ exports[`Modal > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">Content slot</div>
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">Content slot</div>
 
 
 <!--teleport end-->"
@@ -102,11 +102,11 @@ exports[`Modal > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -124,11 +124,11 @@ exports[`Modal > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -146,11 +146,11 @@ exports[`Modal > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
     <!--v-if-->
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -168,11 +168,11 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -190,11 +190,11 @@ exports[`Modal > renders with fullscreen correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -212,8 +212,8 @@ exports[`Modal > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
@@ -228,11 +228,11 @@ exports[`Modal > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]" style="pointer-events: auto;">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -250,11 +250,11 @@ exports[`Modal > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -272,11 +272,11 @@ exports[`Modal > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -294,11 +294,11 @@ exports[`Modal > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -316,11 +316,11 @@ exports[`Modal > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
   </div>
   <!--v-if-->
   <!--v-if-->
@@ -336,10 +336,10 @@ exports[`Modal > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -357,11 +357,11 @@ exports[`Modal > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]">
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" tabindex="-1" class="fixed w-full h-dvh bg-(--ui-bg) divide-y divide-(--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:max-h-[calc(100vh-4rem)] sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-(--ui-border)">
   <div class="px-4 py-5 sm:px-6">
-    <h2 id="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>

test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap

@@ -5,14 +5,14 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -22,12 +22,12 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -39,7 +39,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--teleport start-->
     <!--teleport end-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -52,7 +52,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -60,7 +60,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -71,12 +71,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -96,7 +96,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -104,7 +104,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -115,12 +115,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -140,14 +140,14 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -157,12 +157,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -172,7 +172,7 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] sm:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -185,7 +185,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -193,7 +193,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -204,12 +204,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -229,13 +229,13 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -246,10 +246,10 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item="">Item slot</a>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
         <!--v-if-->
       </li>
     </ul>
@@ -267,7 +267,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -275,7 +275,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -286,12 +286,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -311,7 +311,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -319,7 +319,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -330,12 +330,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -355,13 +355,13 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -372,10 +372,10 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
       </li>
     </ul>
@@ -393,7 +393,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -401,7 +401,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -412,12 +412,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -437,7 +437,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -445,7 +445,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -456,12 +456,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -481,14 +481,14 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -498,12 +498,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -513,7 +513,7 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -526,7 +526,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -534,7 +534,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -545,12 +545,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -570,7 +570,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -578,7 +578,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -589,12 +589,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -614,7 +614,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -622,7 +622,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -633,12 +633,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -658,7 +658,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -666,7 +666,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -677,12 +677,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -702,7 +702,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -710,7 +710,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -721,12 +721,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -746,7 +746,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -754,7 +754,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -765,12 +765,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -790,19 +790,19 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
-        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
+        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </div>
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)] px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -810,16 +810,16 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-[var(--ui-border)]"></div>
+  <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -837,12 +837,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
-        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
+        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if--><span class="truncate">Links<!--v-if--></span>
           <!--v-if-->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!--v-if-->
@@ -850,7 +850,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
           <!---->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!--v-if-->
         <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
           <!---->
@@ -858,15 +858,15 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-[var(--ui-border)]"></div>
+  <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -883,7 +883,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -891,7 +891,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -902,12 +902,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -927,7 +927,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -935,7 +935,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-primary)] after:bg-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -946,12 +946,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -971,7 +971,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -979,7 +979,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -990,12 +990,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1015,7 +1015,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1023,7 +1023,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-primary)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1034,12 +1034,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1059,7 +1059,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1067,7 +1067,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1078,12 +1078,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1103,7 +1103,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1111,7 +1111,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1122,12 +1122,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1147,14 +1147,14 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-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 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -1164,12 +1164,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1179,91 +1179,91 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
       <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-1" aria-labelledby="reka-navigation-menu-v-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
         <ul class="grid p-2 grid-cols-2 gap-2">
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Introduction
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Fully styled and customizable components for Nuxt.</p>
+                <p class="text-sm text-(--ui-text-muted)">Fully styled and customizable components for Nuxt.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Installation
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to install and configure Nuxt UI in your application.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to install and configure Nuxt UI in your application.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Theming
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to customize the look and feel of the components.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to customize the look and feel of the components.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Shortcuts
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to display and define keyboard shortcuts in your app.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to display and define keyboard shortcuts in your app.</p>
               </div>
             </button></li>
         </ul>
       </div>
       <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-2" aria-labelledby="reka-navigation-menu-v-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
         <ul class="grid p-2 grid-cols-2 gap-2">
-          <li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Link
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Use NuxtLink with superpowers.</p>
+                <p class="text-sm text-(--ui-text-muted)">Use NuxtLink with superpowers.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Modal
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a modal within your application.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a modal within your application.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">NavigationMenu
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a list of links.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a list of links.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Pagination
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a list of pages.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a list of pages.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Popover
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a non-modal dialog that floats around a trigger element.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a non-modal dialog that floats around a trigger element.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+          <li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Progress
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Show a horizontal bar to indicate task progression.</p>
+                <p class="text-sm text-(--ui-text-muted)">Show a horizontal bar to indicate task progression.</p>
               </div>
             </a></li>
         </ul>

test/components/__snapshots__/NavigationMenu.spec.ts.snap

@@ -5,14 +5,14 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -22,12 +22,12 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -39,7 +39,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--teleport start-->
     <!--teleport end-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -52,7 +52,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -60,7 +60,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -71,12 +71,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -96,7 +96,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -104,7 +104,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -115,12 +115,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -140,14 +140,14 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -157,12 +157,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -172,7 +172,7 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] sm:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -185,7 +185,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -193,7 +193,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -204,12 +204,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -229,13 +229,13 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -246,10 +246,10 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item="">Item slot</a>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
         <!--v-if-->
       </li>
     </ul>
@@ -267,7 +267,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -275,7 +275,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -286,12 +286,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -311,7 +311,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -319,7 +319,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -330,12 +330,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -355,13 +355,13 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -372,10 +372,10 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
       </li>
     </ul>
@@ -393,7 +393,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -401,7 +401,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -412,12 +412,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -437,7 +437,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -445,7 +445,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -456,12 +456,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -481,14 +481,14 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -498,12 +498,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -513,7 +513,7 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="open" data-orientation="horizontal">
       <!---->
       <!---->
     </div>
@@ -526,7 +526,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -534,7 +534,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -545,12 +545,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -570,7 +570,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -578,7 +578,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -589,12 +589,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -614,7 +614,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -622,7 +622,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -633,12 +633,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -658,7 +658,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -666,7 +666,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -677,12 +677,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -702,7 +702,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -710,7 +710,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -721,12 +721,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -746,7 +746,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -754,7 +754,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -765,12 +765,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -790,19 +790,19 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
-        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
+        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </div>
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)] px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -810,16 +810,16 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-[var(--ui-border)]"></div>
+  <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -837,12 +837,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
-        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5">
+        <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if--><span class="truncate">Links<!--v-if--></span>
           <!--v-if-->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!--v-if-->
@@ -850,7 +850,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
           <!---->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
           <!---->
@@ -858,15 +858,15 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
       </li>
     </ul>
   </div>
-  <div class="px-2 h-px bg-[var(--ui-border)]"></div>
+  <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -883,7 +883,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -891,7 +891,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -902,12 +902,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -927,7 +927,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -935,7 +935,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-[var(--ui-primary)] after:bg-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -946,12 +946,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] transition-colors data-[state=open]:text-[var(--ui-text-highlighted)]" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -971,7 +971,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -979,7 +979,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -990,12 +990,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1015,7 +1015,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1023,7 +1023,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-primary)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-primary)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1034,12 +1034,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1059,7 +1059,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1067,7 +1067,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1078,12 +1078,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1103,7 +1103,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1111,7 +1111,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1122,12 +1122,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1147,14 +1147,14 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
       <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -1164,12 +1164,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors data-[state=open]:text-[var(--ui-text-highlighted)] data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors group-data-[state=open]:text-[var(--ui-text)]" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-[var(--ui-text-dimmed)]" aria-hidden="true"></span></span>
+      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-[var(--ui-text-dimmed)]" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1179,91 +1179,91 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <div class="relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+    <div class="relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
       <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
         <ul class="grid p-2 grid-cols-2 gap-2">
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:house size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:house size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Introduction
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Fully styled and customizable components for Nuxt.</p>
+                <p class="text-sm text-(--ui-text-muted)">Fully styled and customizable components for Nuxt.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Installation
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to install and configure Nuxt UI in your application.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to install and configure Nuxt UI in your application.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Theming
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to customize the look and feel of the components.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to customize the look and feel of the components.</p>
               </div>
             </button></li>
-          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:monitor size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><button type="button" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:monitor size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Shortcuts
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Learn how to display and define keyboard shortcuts in your app.</p>
+                <p class="text-sm text-(--ui-text-muted)">Learn how to display and define keyboard shortcuts in your app.</p>
               </div>
             </button></li>
         </ul>
       </div>
       <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
         <ul class="grid p-2 grid-cols-2 gap-2">
-          <li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Link
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Use NuxtLink with superpowers.</p>
+                <p class="text-sm text-(--ui-text-muted)">Use NuxtLink with superpowers.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Modal
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a modal within your application.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a modal within your application.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">NavigationMenu
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a list of links.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a list of links.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Pagination
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a list of pages.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a list of pages.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Popover
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Display a non-modal dialog that floats around a trigger element.</p>
+                <p class="text-sm text-(--ui-text-muted)">Display a non-modal dialog that floats around a trigger element.</p>
               </div>
             </a></li>
-          <li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-[var(--ui-primary)] hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)] transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] transition-colors" aria-hidden="true"></span>
+          <li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start focus-visible:outline-(--ui-primary) hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
               <div class="flex flex-col items-start">
                 <p class="font-semibold text-sm relative inline-flex">Progress
                   <!--v-if-->
                 </p>
-                <p class="text-sm text-[var(--ui-text-muted)]">Show a horizontal bar to indicate task progression.</p>
+                <p class="text-sm text-(--ui-text-muted)">Show a horizontal bar to indicate task progression.</p>
               </div>
             </a></li>
         </ul>

test/components/__snapshots__/PinInput-vue.spec.ts.snap

@@ -1,79 +1,79 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
+exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" disabled="" value=""></div>"`;
+exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" disabled="" value=""></div>"`;
 
-exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" id="pin-input-id" value=""></div>"`;
+exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" id="pin-input-id" value=""></div>"`;
 
-exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 6 of 6"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 6 of 6"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
+exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="pin-input-name" value=""></div>"`;
+exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="pin-input-name" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" required="" value=""></div>"`;
+exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" required="" value=""></div>"`;
 
-exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

test/components/__snapshots__/PinInput.spec.ts.snap

@@ -1,79 +1,79 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with as correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with class correctly 1`] = `"<div class="inline-flex items-center gap-1.5 absolute" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
+exports[`PinInput > renders with defaultValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" disabled="" value=""></div>"`;
+exports[`PinInput > renders with disabled correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-disabled=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" disabled="" data-disabled="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" disabled="" value=""></div>"`;
 
-exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" id="pin-input-id" value=""></div>"`;
+exports[`PinInput > renders with id correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" id="pin-input-id" value=""></div>"`;
 
-exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 6 of 6"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with length correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 6"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 6 of 6"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with mask correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="password" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
+exports[`PinInput > renders with modelValue correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5" value="1"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value="1"></div>"`;
 
-exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="pin-input-name" value=""></div>"`;
+exports[`PinInput > renders with name correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="pin-input-name" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] ring ring-inset ring-[var(--ui-border-inverted)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with neutral variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted) ring ring-inset ring-(--ui-border-inverted)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with otp correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="one-time-code" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with placeholder correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="*" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant ghost highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-transparent ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant none highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-transparent ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant outline highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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 ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant soft highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm 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)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with primary variant subtle highlight correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ring ring-inset ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" required="" value=""></div>"`;
+exports[`PinInput > renders with required correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" required="" value=""></div>"`;
 
-exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-9 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-7 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-10 text-base text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-6 text-xs text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with type correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="" class="rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
 
-exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] rounded-full" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;
+exports[`PinInput > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 1 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 2 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 3 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 4 of 5"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" class="border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) rounded-full" aria-label="pin input 5 of 5"><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="" value=""></div>"`;

test/components/__snapshots__/Popover-vue.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`Popover > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-(--ui-border)" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
 </div>
 
 
@@ -19,7 +19,7 @@ exports[`Popover > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -32,7 +32,7 @@ exports[`Popover > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center">Content slot
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center">Content slot
     <!--v-if-->
   </div>
 </div>
@@ -47,7 +47,7 @@ exports[`Popover > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -60,7 +60,7 @@ exports[`Popover > renders with open correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -73,7 +73,7 @@ exports[`Popover > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
 </div>
 
 

test/components/__snapshots__/Popover.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`Popover > renders with arrow correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" rounded="false" viewBox="0 0 12 6" preserveAspectRatio="none" class="fill-(--ui-border)" style="display: block;"><path d="M0 0L6 6L12 0"></path></svg></span></div>
 </div>
 
 
@@ -19,7 +19,7 @@ exports[`Popover > renders with class correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -32,7 +32,7 @@ exports[`Popover > renders with content slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center">Content slot
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center">Content slot
     <!--v-if-->
   </div>
 </div>
@@ -47,7 +47,7 @@ exports[`Popover > renders with default slot correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0-0-0" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0-0-1" data-state="open" aria-labelledby="reka-popover-trigger-v-0-0-0" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -60,7 +60,7 @@ exports[`Popover > renders with open correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto" data-side="bottom" data-align="center"></div>
 </div>
 
 
@@ -73,7 +73,7 @@ exports[`Popover > renders with ui correctly 1`] = `
 
 
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
-  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
+  <div id="reka-popover-content-v-0-0-0" data-state="open" aria-labelledby="" style="--reka-popover-content-transform-origin: var(--reka-popper-transform-origin); --reka-popover-content-available-width: var(--reka-popper-available-width); --reka-popover-content-available-height: var(--reka-popper-available-height); --reka-popover-trigger-width: var(--reka-popper-anchor-width); --reka-popover-trigger-height: var(--reka-popper-anchor-height); animation: none;" role="dialog" data-dismissable-layer="" tabindex="-1" class="bg-(--ui-bg) rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto shadow-xl" data-side="bottom" data-align="center"></div>
 </div>
 
 

test/components/__snapshots__/Progress-vue.spec.ts.snap

@@ -3,8 +3,8 @@
 exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -13,8 +13,8 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -23,8 +23,8 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -33,8 +33,8 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 exports[`Progress > renders with animation swing correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -43,8 +43,8 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 exports[`Progress > renders with as correctly 1`] = `
 "<section class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -53,8 +53,8 @@ exports[`Progress > renders with as correctly 1`] = `
 exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -63,8 +63,8 @@ exports[`Progress > renders with class correctly 1`] = `
 exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-bg-inverted) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -72,11 +72,11 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
-  <div class="grid items-end text-[var(--ui-primary)] text-sm">
+  <div class="grid items-end text-(--ui-primary) text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
@@ -88,11 +88,11 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
-  <div class="grid items-end text-[var(--ui-primary)] text-sm">
+  <div class="grid items-end text-(--ui-primary) text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
@@ -105,8 +105,8 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -115,8 +115,8 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -125,8 +125,8 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) h-full w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -135,8 +135,8 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -145,8 +145,8 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -155,8 +155,8 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -165,8 +165,8 @@ exports[`Progress > renders with size lg correctly 1`] = `
 exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -175,8 +175,8 @@ exports[`Progress > renders with size md correctly 1`] = `
 exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -185,8 +185,8 @@ exports[`Progress > renders with size sm correctly 1`] = `
 exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -195,8 +195,8 @@ exports[`Progress > renders with size xl correctly 1`] = `
 exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -204,9 +204,9 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -214,9 +214,9 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -225,8 +225,8 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -235,8 +235,8 @@ exports[`Progress > renders with status slot correctly 1`] = `
 exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-[var(--ui-bg)]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-(--ui-bg)" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"

test/components/__snapshots__/Progress.spec.ts.snap

@@ -3,8 +3,8 @@
 exports[`Progress > renders with animation carousel correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -13,8 +13,8 @@ exports[`Progress > renders with animation carousel correctly 1`] = `
 exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -23,8 +23,8 @@ exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
 exports[`Progress > renders with animation elastic correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -33,8 +33,8 @@ exports[`Progress > renders with animation elastic correctly 1`] = `
 exports[`Progress > renders with animation swing correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -43,8 +43,8 @@ exports[`Progress > renders with animation swing correctly 1`] = `
 exports[`Progress > renders with as correctly 1`] = `
 "<section class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </section>"
@@ -53,8 +53,8 @@ exports[`Progress > renders with as correctly 1`] = `
 exports[`Progress > renders with class correctly 1`] = `
 "<div class="gap-2 flex flex-col w-48">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -63,8 +63,8 @@ exports[`Progress > renders with class correctly 1`] = `
 exports[`Progress > renders with color neutral correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-bg-inverted) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -72,11 +72,11 @@ exports[`Progress > renders with color neutral correctly 1`] = `
 
 exports[`Progress > renders with max correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
-  <div class="grid items-end text-[var(--ui-primary)] text-sm">
+  <div class="grid items-end text-(--ui-primary) text-sm">
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
     <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
@@ -88,11 +88,11 @@ exports[`Progress > renders with max correctly 1`] = `
 
 exports[`Progress > renders with max inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
-  <div class="grid items-end text-[var(--ui-primary)] text-sm">
+  <div class="grid items-end text-(--ui-primary) text-sm">
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
     <div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
@@ -105,8 +105,8 @@ exports[`Progress > renders with max inverted correctly 1`] = `
 exports[`Progress > renders with modelValue correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -115,8 +115,8 @@ exports[`Progress > renders with modelValue correctly 1`] = `
 exports[`Progress > renders with orientation horizontal correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -125,8 +125,8 @@ exports[`Progress > renders with orientation horizontal correctly 1`] = `
 exports[`Progress > renders with orientation vertical correctly 1`] = `
 "<div class="gap-2 h-full flex flex-row-reverse">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] h-full w-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) h-full w-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -135,8 +135,8 @@ exports[`Progress > renders with orientation vertical correctly 1`] = `
 exports[`Progress > renders with size 2xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -145,8 +145,8 @@ exports[`Progress > renders with size 2xl correctly 1`] = `
 exports[`Progress > renders with size 2xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-px" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-px" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -155,8 +155,8 @@ exports[`Progress > renders with size 2xs correctly 1`] = `
 exports[`Progress > renders with size lg correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-3" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-3" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -165,8 +165,8 @@ exports[`Progress > renders with size lg correctly 1`] = `
 exports[`Progress > renders with size md correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -175,8 +175,8 @@ exports[`Progress > renders with size md correctly 1`] = `
 exports[`Progress > renders with size sm correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-1" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-1" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -185,8 +185,8 @@ exports[`Progress > renders with size sm correctly 1`] = `
 exports[`Progress > renders with size xl correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-4" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-4" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -195,8 +195,8 @@ exports[`Progress > renders with size xl correctly 1`] = `
 exports[`Progress > renders with size xs correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-0.5" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-0.5" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -204,9 +204,9 @@ exports[`Progress > renders with size xs correctly 1`] = `
 
 exports[`Progress > renders with status correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -214,9 +214,9 @@ exports[`Progress > renders with status correctly 1`] = `
 
 exports[`Progress > renders with status inverted correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
-  <div class="flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
+  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -225,8 +225,8 @@ exports[`Progress > renders with status inverted correctly 1`] = `
 exports[`Progress > renders with status slot correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)] w-full h-2" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"
@@ -235,8 +235,8 @@ exports[`Progress > renders with status slot correctly 1`] = `
 exports[`Progress > renders with ui correctly 1`] = `
 "<div class="gap-2 w-full flex flex-col">
   <!--v-if-->
-  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-[var(--ui-bg)]" style="transform: translateZ(0);">
-    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-[var(--ui-primary)] data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-(--ui-bg)" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
   </div>
   <!--v-if-->
 </div>"

test/components/__snapshots__/RadioGroup-vue.spec.ts.snap

@@ -5,29 +5,29 @@ exports[`RadioGroup > renders with as correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -41,29 +41,29 @@ exports[`RadioGroup > renders with class correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -86,28 +86,28 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -121,30 +121,30 @@ exports[`RadioGroup > renders with description correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">Description 0</p>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
+        <p class="text-(--ui-text-muted)">Description 0</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">Description 1</p>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
+        <p class="text-(--ui-text-muted)">Description 1</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">Description 2</p>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
+        <p class="text-(--ui-text-muted)">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -157,29 +157,29 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -193,30 +193,30 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">1</p>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
+        <p class="text-(--ui-text-muted)">1</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">2</p>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
+        <p class="text-(--ui-text-muted)">2</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">3</p>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
+        <p class="text-(--ui-text-muted)">3</p>
       </div>
     </div>
   </fieldset>
@@ -229,29 +229,29 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -265,29 +265,29 @@ exports[`RadioGroup > renders with items correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -301,29 +301,29 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -337,29 +337,29 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -373,29 +373,29 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -409,28 +409,28 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -444,29 +444,29 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
   <fieldset class="flex flex-row gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2 me-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2 me-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2 me-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -478,31 +478,31 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
   <fieldset class="flex flex-col gap-1">
-    <legend class="mb-1 block font-medium text-[var(--ui-text)] text-sm after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Legend</legend>
+    <legend class="mb-1 block font-medium text-(--ui-text) text-sm after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Legend</legend>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -516,29 +516,29 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -552,29 +552,29 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -588,29 +588,29 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
   <fieldset class="flex flex-col gap-0.5">
     <!--v-if-->
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -624,29 +624,29 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
   <fieldset class="flex flex-col gap-1.5">
     <!--v-if-->
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -660,29 +660,29 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
   <fieldset class="flex flex-col gap-0.5">
     <!--v-if-->
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -696,29 +696,29 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-4"><label for="v-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-4"><label for="v-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-4"><label for="v-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -732,29 +732,29 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0:Option 1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0:Option 2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0:Option 3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>

test/components/__snapshots__/RadioGroup.spec.ts.snap

@@ -5,29 +5,29 @@ exports[`RadioGroup > renders with as correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -41,29 +41,29 @@ exports[`RadioGroup > renders with class correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -86,28 +86,28 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -121,30 +121,30 @@ exports[`RadioGroup > renders with description correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">Description 0</p>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
+        <p class="text-(--ui-text-muted)">Description 0</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">Description 1</p>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
+        <p class="text-(--ui-text-muted)">Description 1</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">Description 2</p>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
+        <p class="text-(--ui-text-muted)">Description 2</p>
       </div>
     </div>
   </fieldset>
@@ -157,29 +157,29 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -193,30 +193,30 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">1</p>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
+        <p class="text-(--ui-text-muted)">1</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">2</p>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
+        <p class="text-(--ui-text-muted)">2</p>
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">3</p>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
+        <p class="text-(--ui-text-muted)">3</p>
       </div>
     </div>
   </fieldset>
@@ -229,29 +229,29 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text) cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -265,29 +265,29 @@ exports[`RadioGroup > renders with items correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -301,29 +301,29 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -337,29 +337,29 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -373,29 +373,29 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -409,28 +409,28 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full bg-(--ui-primary) after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -444,29 +444,29 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
   <fieldset class="flex flex-row gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2 me-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2 me-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2 me-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -478,31 +478,31 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
   <fieldset class="flex flex-col gap-1">
-    <legend class="mb-1 block font-medium text-[var(--ui-text)] text-sm after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Legend</legend>
+    <legend class="mb-1 block font-medium text-(--ui-text) text-sm after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Legend</legend>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -516,29 +516,29 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -552,29 +552,29 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -588,29 +588,29 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
   <fieldset class="flex flex-col gap-0.5">
     <!--v-if-->
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -624,29 +624,29 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
   <fieldset class="flex flex-col gap-1.5">
     <!--v-if-->
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -660,29 +660,29 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
   <fieldset class="flex flex-col gap-0.5">
     <!--v-if-->
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -696,29 +696,29 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-4"><label for="v-0-0:1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-4"><label for="v-0-0:2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-4"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-4"><label for="v-0-0:3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -732,29 +732,29 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+      <div class="ms-2"><label for="v-0-0:Option 1" class="block font-medium text-(--ui-text)">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+      <div class="ms-2"><label for="v-0-0:Option 2" class="block font-medium text-(--ui-text)">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary) size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+      <div class="ms-2"><label for="v-0-0:Option 3" class="block font-medium text-(--ui-text)">Option 3</label>
         <!--v-if-->
       </div>
     </div>

test/components/__snapshots__/Separator-vue.spec.ts.snap

@@ -1,118 +1,118 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-[var(--ui-border)] w-full border-solid border-t"></div><!--v-if--></span>"`;
+exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-(--ui-border) w-full border-solid border-t"></div><!--v-if--></span>"`;
 
 exports[`Separator > renders with avatar correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span></div>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with color primary correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-primary)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-primary) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with decorative correctly 1`] = `
 "<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with icon correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.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>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with label correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
-  <div class="border-[var(--ui-border)] h-full border-solid border-s"></div>
+  <div class="border-(--ui-border) h-full border-solid border-s"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[4px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[4px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[3px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[3px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[2px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[2px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[5px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[5px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dashed correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-dashed border-t"></div>
+  <div class="border-(--ui-border) w-full border-dashed border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dotted correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-dotted border-t"></div>
+  <div class="border-(--ui-border) w-full border-dotted border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type solid correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;

test/components/__snapshots__/Separator.spec.ts.snap

@@ -1,118 +1,118 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-[var(--ui-border)] w-full border-solid border-t"></div><!--v-if--></span>"`;
+exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-(--ui-border) w-full border-solid border-t"></div><!--v-if--></span>"`;
 
 exports[`Separator > renders with avatar correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><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" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span></div>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"> </span></span></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with class correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with color primary correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-primary)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-primary) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with decorative correctly 1`] = `
 "<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with icon correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><span class="iconify i-lucide:image shrink-0 size-5" aria-hidden="true"></span></div>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="iconify i-lucide:image shrink-0 size-5" aria-hidden="true"></span></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with label correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
-  <div class="font-medium text-[var(--ui-text)] flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
+  <div class="font-medium text-(--ui-text) flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
 </div>"
 `;
 
 exports[`Separator > renders with orientation vertical correctly 1`] = `
 "<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
-  <div class="border-[var(--ui-border)] h-full border-solid border-s"></div>
+  <div class="border-(--ui-border) h-full border-solid border-s"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[4px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[4px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size md correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[3px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[3px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size sm correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[2px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[2px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xl correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t-[5px]"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t-[5px]"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with size xs correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dashed correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-dashed border-t"></div>
+  <div class="border-(--ui-border) w-full border-dashed border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type dotted correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-dotted border-t"></div>
+  <div class="border-(--ui-border) w-full border-dotted border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with type solid correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Separator > renders with ui correctly 1`] = `
 "<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
-  <div class="border-[var(--ui-border)] w-full border-solid border-t"></div>
+  <div class="border-(--ui-border) w-full border-solid border-t"></div>
   <!--v-if-->
 </div>"
 `;

test/components/__snapshots__/Skeleton-vue.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"></span>"`;
+exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"></span>"`;
 
-exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-[var(--ui-bg-elevated)] rounded-full size-12"></div>"`;
+exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-(--ui-bg-elevated) rounded-full size-12"></div>"`;

test/components/__snapshots__/Skeleton.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"></span>"`;
+exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"></span>"`;
 
-exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-[var(--ui-bg-elevated)] rounded-full size-12"></div>"`;
+exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-(--ui-bg-elevated) rounded-full size-12"></div>"`;

test/components/__snapshots__/Slideover-vue.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -27,11 +27,11 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="bottom" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -49,11 +49,11 @@ exports[`Slideover > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed divide-y divide-(--ui-border) sm:ring ring-(--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-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -71,8 +71,8 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-->Close slot
@@ -90,11 +90,11 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -112,8 +112,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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]">Content slot</div>
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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]">Content slot</div>
 
 
 <!--teleport end-->"
@@ -124,11 +124,11 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0" role="dialog" aria-describedby="reka-dialog-description-v-2" aria-labelledby="reka-dialog-title-v-1" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -146,11 +146,11 @@ exports[`Slideover > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -168,11 +168,11 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -190,11 +190,11 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -212,8 +212,8 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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">Header slot</div>
   <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
@@ -228,11 +228,11 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="left" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -250,11 +250,11 @@ exports[`Slideover > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -272,11 +272,11 @@ exports[`Slideover > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -294,11 +294,11 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -316,11 +316,11 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="top" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -338,11 +338,11 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -360,11 +360,11 @@ exports[`Slideover > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
   </div>
   <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
@@ -380,10 +380,10 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>
@@ -401,11 +401,11 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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>
+    <h2 id="reka-dialog-title-v-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent 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>

test/components/__snapshots__/Slideover.spec.ts.snap

@@ -5,11 +5,11 @@ exports[`Slideover > renders with body slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -27,11 +27,11 @@ exports[`Slideover > renders with bottom side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="bottom" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -49,11 +49,11 @@ exports[`Slideover > renders with class correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed divide-y divide-(--ui-border) sm:ring ring-(--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-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -71,8 +71,8 @@ exports[`Slideover > renders with close slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-->Close slot
@@ -90,11 +90,11 @@ exports[`Slideover > renders with closeIcon correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide: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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -112,8 +112,8 @@ exports[`Slideover > renders with content slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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]">Content slot</div>
+<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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]">Content slot</div>
 
 
 <!--teleport end-->"
@@ -124,11 +124,11 @@ exports[`Slideover > renders with default slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="reka-dialog-content-v-0-0-0" role="dialog" aria-describedby="reka-dialog-description-v-0-0-2" aria-labelledby="reka-dialog-title-v-0-0-1" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -146,11 +146,11 @@ exports[`Slideover > renders with description correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -168,11 +168,11 @@ exports[`Slideover > renders with description slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -190,11 +190,11 @@ exports[`Slideover > renders with footer slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -212,8 +212,8 @@ exports[`Slideover > renders with header slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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">Header slot</div>
   <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
@@ -228,11 +228,11 @@ exports[`Slideover > renders with left side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="left" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -250,11 +250,11 @@ exports[`Slideover > renders with open correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -272,11 +272,11 @@ exports[`Slideover > renders with title correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -294,11 +294,11 @@ exports[`Slideover > renders with title slot correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -316,11 +316,11 @@ exports[`Slideover > renders with top side correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="top" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -338,11 +338,11 @@ exports[`Slideover > renders with ui correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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-hidden 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-lucide:x 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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-2"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -360,11 +360,11 @@ exports[`Slideover > renders without close correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--ui-text-muted) text-sm">Description</p>
   </div>
   <div class="flex-1 overflow-y-auto p-4 sm:p-6"></div>
   <!--v-if-->
@@ -380,10 +380,10 @@ exports[`Slideover > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -401,11 +401,11 @@ exports[`Slideover > renders without transition correctly 1`] = `
 <!--teleport start-->
 
 
-<div data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-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 data-state="open" style="pointer-events: auto;" class="fixed inset-0 bg-(--ui-bg-elevated)/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open" data-side="right" tabindex="-1" class="fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--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="reka-dialog-title-v-0-0-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
-    <p id="reka-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-hidden 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-lucide:x shrink-0 size-5" aria-hidden="true"></span>
+    <h2 id="reka-dialog-title-v-0-0-0" class="text-(--ui-text-highlighted) font-semibold">Title</h2>
+    <p id="reka-dialog-description-v-0-0-1" class="mt-1 text-(--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-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>

test/components/__snapshots__/Slider-vue.spec.ts.snap

@@ -1,112 +1,112 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with as correctly 1`] = `
-"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-  <div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+  <div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
   <!---->
 </section>"
 `;
 
 exports[`Slider > renders with class correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with color neutral correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-bg-inverted)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-bg-inverted) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with defaultValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with disabled correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item=""></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item=""></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with inverted correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with min max step correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="30"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="30"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with modelValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with name correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with orientation vertical correctly 1`] = `
-"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] w-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-(--ui-primary) w-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size lg correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size md correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size sm correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size xl correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size xs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with ui correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-[var(--ui-bg-elevated)]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-(--ui-bg-elevated)"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;

test/components/__snapshots__/Slider.spec.ts.snap

@@ -1,112 +1,112 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Slider > renders with as correctly 1`] = `
-"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-  <div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<section data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+  <div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
   <!---->
 </section>"
 `;
 
 exports[`Slider > renders with class correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-48" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with color neutral correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-bg-inverted)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-bg-inverted) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with defaultValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with disabled correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item=""></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full opacity-75 cursor-not-allowed" aria-disabled="true" data-disabled=""><span data-disabled="" data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-disabled="" data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" data-disabled="" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item=""></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with inverted correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="right: 0%; left: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; right: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with min max step correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="4" aria-valuemax="12" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with min steps between thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="30"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 70%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(30% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="30"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with modelValue correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with multiple thumbs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="10"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 90%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-label="Minimum" aria-valuenow="0"></div>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(10% + 0px);" data-reka-collection-item="" aria-label="Maximum" aria-valuenow="10"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with name correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with orientation vertical correctly 1`] = `
-"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] w-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" data-orientation="vertical" style="--reka-slider-thumb-transform: translateY(50%);" class="relative flex items-center select-none touch-none flex-col h-full" dir="ltr" aria-disabled="false"><span data-orientation="vertical" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow w-[8px]"><span data-orientation="vertical" style="bottom: 0%; top: 100%;" class="absolute rounded-full bg-(--ui-primary) w-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-orientation="vertical" style="transform: var(--reka-slider-thumb-transform); position: absolute; bottom: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size lg correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[9px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size md correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size sm correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[7px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-3.5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size xl correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[10px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-5" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with size xs correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow h-[6px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-3" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;
 
 exports[`Slider > renders with ui correctly 1`] = `
-"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-[var(--ui-bg-elevated)]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-[var(--ui-primary)] h-full"></span></span>
-<div class="rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full" aria-disabled="false"><span data-orientation="horizontal" class="relative overflow-hidden rounded-full grow h-[8px] bg-(--ui-bg-elevated)"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-(--ui-primary) h-full"></span></span>
+<div class="rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" data-reka-collection-item="" aria-valuenow="0"></div>
 <!----></span>"
 `;

test/components/__snapshots__/Switch-vue.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Switch > renders with as correctly 1`] = `
 "<section 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -11,7 +11,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--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-->
@@ -20,7 +20,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -29,7 +29,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--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-(--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-->
@@ -38,7 +38,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -47,21 +47,21 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
-    <p class="text-[var(--ui-text-muted)]">Description</p>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label</label>
+    <p class="text-(--ui-text-muted)">Description</p>
   </div>
 </div>"
 `;
 
 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -69,7 +69,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -78,7 +78,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -87,10 +87,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -98,10 +98,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text)">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -109,7 +109,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--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-->
@@ -118,7 +118,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--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-->
@@ -127,7 +127,7 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
 
 exports[`Switch > renders with modelValue 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -136,7 +136,7 @@ exports[`Switch > renders with modelValue 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -145,10 +145,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -156,7 +156,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -165,7 +165,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -174,7 +174,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -183,7 +183,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-6"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -192,7 +192,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -201,7 +201,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -210,7 +210,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--ui-primary) group-data-[state=unchecked]:opacity-100" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -219,7 +219,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->

test/components/__snapshots__/Switch.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Switch > renders with as correctly 1`] = `
 "<section 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -11,7 +11,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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-lucide:check 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-lucide:check absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--ui-primary) group-data-[state=checked]:opacity-100" aria-hidden="true"></span>
       <!--v-if--></span>
       <!---->
     </button></div>
@@ -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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--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-(--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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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,21 +48,21 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
-    <p class="text-[var(--ui-text-muted)]">Description</p>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
+    <p class="text-(--ui-text-muted)">Description</p>
   </div>
 </div>"
 `;
 
 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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,10 +88,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -99,10 +99,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text)">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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-lucide:refresh-cw 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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-lucide:refresh-cw absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--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-->
@@ -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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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-lucide: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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-lucide:sparkles absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--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-->
@@ -128,7 +128,7 @@ exports[`Switch > renders with loadingIcon correctly 1`] = `
 
 exports[`Switch > renders with modelValue 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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 modelValue 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -146,10 +146,10 @@ 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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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>
+  <div class="ms-2 text-sm"><label for="v-0-0" class="block font-medium text-(--ui-text) after:content-['*'] after:ms-0.5 after:text-(--ui-error)">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -157,7 +157,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -166,7 +166,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -175,7 +175,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -184,7 +184,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-6"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -193,7 +193,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-4"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -202,7 +202,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->
@@ -211,7 +211,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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-lucide:x 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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-lucide:x absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--ui-primary) group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span>
       <!---->
     </button></div>
   <!--v-if-->
@@ -220,7 +220,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-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-[var(--ui-bg-accented)] transition-colors duration-200 data-[state=checked]:bg-[var(--ui-primary)] focus-visible:outline-[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>
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented) transition-colors duration-200 data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--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-(--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-->