feat(DropdownMenu): new component (#37)

test/components/Checkbox.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { UCheckbox } from '#components'
-import type { TypeOf } from 'zod'
+import Checkbox, { type CheckboxProps } from '../../src/runtime/components/Checkbox.vue'
 import ComponentRender from '../component-render'
 import { defu } from 'defu'
 
@@ -25,8 +24,8 @@ describe('Checkbox', () => {
     ['with size lg', { props: { size: 'lg' as const } }],
     ['with size xl', { props: { size: 'xl' as const } }]
     // @ts-ignore
-  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof UCheckbox.props>) => {
-    const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), UCheckbox)
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxProps }) => {
+    const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), Checkbox)
     expect(html).toMatchSnapshot()
   })
 })

test/components/DropdownMenu.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import DropdownMenu, { type DropdownMenuProps } from '../../src/runtime/components/DropdownMenu.vue'
+import ComponentRender from '../component-render'
+
+const items = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  label: 'Edit',
+  icon: 'i-heroicons-pencil-square-20-solid',
+  shortcuts: ['E']
+}, {
+  label: 'Duplicate',
+  icon: 'i-heroicons-document-duplicate-20-solid',
+  shortcuts: ['D'],
+  disabled: true
+}]
+
+describe('DropdownMenu', () => {
+  it.each([
+    ['basic case', { props: { open: true, portal: false, items } }],
+    ['with class', { props: { open: true, portal: false, items, class: 'min-w-96' } }],
+    ['with ui', { props: { open: true, portal: false, items, ui: { itemLeadingIcon: 'size-4' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: DropdownMenuProps<typeof items[number]>, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, DropdownMenu)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/NavigationMenu.spec.ts

@@ -27,7 +27,7 @@ describe('NavigationMenu', () => {
     ['basic case', { props: { links } }],
     ['with vertical orientation', { props: { links, orientation: 'vertical' as const } }],
     ['with class', { props: { links, class: 'w-48' } }],
-    ['with ui', { props: { links, ui: { icon: 'w-4 h-4' } } }]
+    ['with ui', { props: { links, ui: { linkLeadingIcon: 'size-4' } } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: NavigationMenuProps<typeof links[number]>, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, NavigationMenu)
     expect(html).toMatchSnapshot()

test/components/Popover.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 
 describe('Popover', () => {
   it.each([
-    ['basic case', { props: { open: true, arrow: true }, slots: { default: () => 'Click me', content: () => 'Popover content' } }]
+    ['basic case', { props: { open: true, portal: false, arrow: true }, slots: { default: () => 'Click me', content: () => 'Popover content' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: PopoverProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Popover)
     expect(html).toMatchSnapshot()

test/components/Tooltip.spec.ts

@@ -15,9 +15,9 @@ const TooltipWrapper = defineComponent({
 
 describe('Tooltip', () => {
   it.each([
-    ['with text', { props: { text: 'Tooltip', open: true } }],
-    ['with arrow', { props: { text: 'Tooltip', arrow: true, open: true } }],
-    ['with shortcuts', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true } }]
+    ['with text', { props: { text: 'Tooltip', open: true, portal: false } }],
+    ['with arrow', { props: { text: 'Tooltip', arrow: true, open: true, portal: false } }],
+    ['with shortcuts', { props: { text: 'Tooltip', shortcuts: ['⌘', 'K'], open: true, portal: false } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TooltipProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, TooltipWrapper)
     expect(html).toMatchSnapshot()

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

@@ -3,17 +3,17 @@
 exports[`Accordion > renders basic case correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-1" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-1" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-1" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-2" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-3" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-3" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-3" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-4" value="1">
@@ -21,9 +21,9 @@ exports[`Accordion > renders basic case correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-5" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-5" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-5" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-6" value="2">
@@ -31,9 +31,9 @@ exports[`Accordion > renders basic case correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-7" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-7" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-7" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-8" value="3">
@@ -41,9 +41,9 @@ exports[`Accordion > renders basic case correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-9" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-9" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-9" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-10" value="4">
@@ -51,9 +51,9 @@ exports[`Accordion > renders basic case correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-11" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-11" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-11" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-12" value="5">
@@ -66,17 +66,17 @@ exports[`Accordion > renders basic case correctly 1`] = `
 exports[`Accordion > renders with as correctly 1`] = `
 "<section class="w-full">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-25" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-25" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-25" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-26" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-27" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-27" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-27" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-28" value="1">
@@ -84,9 +84,9 @@ exports[`Accordion > renders with as correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-29" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-29" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-29" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-30" value="2">
@@ -94,9 +94,9 @@ exports[`Accordion > renders with as correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-31" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-31" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-31" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-32" value="3">
@@ -104,9 +104,9 @@ exports[`Accordion > renders with as correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-33" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-33" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-33" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-34" value="4">
@@ -114,9 +114,9 @@ exports[`Accordion > renders with as correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-35" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-35" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-35" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-36" value="5">
@@ -129,17 +129,17 @@ exports[`Accordion > renders with as correctly 1`] = `
 exports[`Accordion > renders with class correctly 1`] = `
 "<div class="w-96">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-13" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-13" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-13" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-14" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-15" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-15" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-15" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-16" value="1">
@@ -147,9 +147,9 @@ exports[`Accordion > renders with class correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-17" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-17" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-17" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-18" value="2">
@@ -157,9 +157,9 @@ exports[`Accordion > renders with class correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-19" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-19" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-19" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-20" value="3">
@@ -167,9 +167,9 @@ exports[`Accordion > renders with class correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-21" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-21" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-21" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-22" value="4">
@@ -177,9 +177,9 @@ exports[`Accordion > renders with class correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-23" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-23" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-23" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-24" value="5">
@@ -192,17 +192,17 @@ exports[`Accordion > renders with class correctly 1`] = `
 exports[`Accordion > renders with collapsible correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-61" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-61" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-61" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-62" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-63" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-63" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-63" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-64" value="1">
@@ -210,9 +210,9 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-65" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-65" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-65" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-66" value="2">
@@ -220,9 +220,9 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-67" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-67" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-67" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-68" value="3">
@@ -230,9 +230,9 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-69" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-69" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-69" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-70" value="4">
@@ -240,9 +240,9 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-71" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-71" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-71" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-72" value="5">
@@ -255,17 +255,17 @@ exports[`Accordion > renders with collapsible correctly 1`] = `
 exports[`Accordion > renders with content slot correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-109" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-109" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-109" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-110" value="0">Content slot</div>
   </div>
   <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-111" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-111" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-111" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-112" value="1">
@@ -273,9 +273,9 @@ exports[`Accordion > renders with content slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-113" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-113" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-113" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-114" value="2">
@@ -283,9 +283,9 @@ exports[`Accordion > renders with content slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-115" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-115" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-115" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-116" value="3">
@@ -293,9 +293,9 @@ exports[`Accordion > renders with content slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-117" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-117" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-117" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-118" value="4">
@@ -303,9 +303,9 @@ exports[`Accordion > renders with content slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-119" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-119" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-119" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-120" value="5">
@@ -318,17 +318,17 @@ exports[`Accordion > renders with content slot correctly 1`] = `
 exports[`Accordion > renders with default slot correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-97" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-97" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-97" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-98" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-99" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-99" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-99" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-100" value="1">
@@ -336,9 +336,9 @@ exports[`Accordion > renders with default slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-101" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-101" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-101" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-102" value="2">
@@ -346,9 +346,9 @@ exports[`Accordion > renders with default slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-103" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-103" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-103" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-104" value="3">
@@ -356,9 +356,9 @@ exports[`Accordion > renders with default slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-105" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-105" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-105" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-106" value="4">
@@ -366,9 +366,9 @@ exports[`Accordion > renders with default slot correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-107" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-107" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Default slot</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-107" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-108" value="5">
@@ -381,9 +381,9 @@ 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-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-85" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-85" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-85" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-86" value="0">
@@ -391,17 +391,17 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
     </div>
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-87" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-87" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-87" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-88" value="1">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 data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-89" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-89" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-89" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-90" value="2">
@@ -409,9 +409,9 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-91" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-91" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-91" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-92" value="3">
@@ -419,9 +419,9 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-93" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-93" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-93" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-94" value="4">
@@ -429,9 +429,9 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-95" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-95" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-95" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-96" value="5">
@@ -444,17 +444,17 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
 exports[`Accordion > renders with disabled correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-49" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-49" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-49" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-50" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-51" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-51" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-51" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-52" value="1">
@@ -462,9 +462,9 @@ exports[`Accordion > renders with disabled correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-53" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-53" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-53" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-54" value="2">
@@ -472,9 +472,9 @@ exports[`Accordion > renders with disabled correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-55" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-55" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-55" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-56" value="3">
@@ -482,9 +482,9 @@ exports[`Accordion > renders with disabled correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-57" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-57" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-57" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-58" value="4">
@@ -492,9 +492,9 @@ exports[`Accordion > renders with disabled correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-59" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-59" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-59" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-60" value="5">
@@ -507,9 +507,9 @@ exports[`Accordion > renders with disabled correctly 1`] = `
 exports[`Accordion > renders with modelValue correctly 1`] = `
 "<div class="w-full">
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-73" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-73" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-73" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-74" value="0">
@@ -517,17 +517,17 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
     </div>
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-75" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="radix-vue-accordion-trigger-75" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-75" data-state="open" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-76" value="1">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 data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-77" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-77" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-77" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-78" value="2">
@@ -535,9 +535,9 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-79" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-79" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-79" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-80" value="3">
@@ -545,9 +545,9 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-81" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-81" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-81" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-82" value="4">
@@ -555,9 +555,9 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-83" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-83" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-83" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-84" value="5">
@@ -570,17 +570,17 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
 exports[`Accordion > renders with type correctly 1`] = `
 "<div class="w-full">
   <div data-state="open" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-37" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="radix-vue-accordion-trigger-37" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"></path>
-        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Getting Started</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="true" aria-labelledby="radix-vue-accordion-trigger-37" data-state="open" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-38" value="0">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 data-state="closed" data-disabled="" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-39" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-disabled="" disabled="" id="radix-vue-accordion-trigger-39" data-radix-vue-collection-item="" aria-disabled="true" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
-        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Installation</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-39" data-state="closed" data-disabled="" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-40" value="1">
@@ -588,9 +588,9 @@ exports[`Accordion > renders with type correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-41" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-41" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 11.25l1.5 1.5l.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75l1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97l-.75-.75l.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25L12.75 9"></path>
-        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Theming</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-41" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-42" value="2">
@@ -598,9 +598,9 @@ exports[`Accordion > renders with type correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-43" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-43" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125zm12 1.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125zm-10.5 7.5c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Layouts</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-43" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-44" value="3">
@@ -608,9 +608,9 @@ exports[`Accordion > renders with type correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-45" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-45" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3l5.571-3m-11.142 0L2.25 7.5L12 2.25l9.75 5.25l-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75L2.25 16.5l4.179-2.25m11.142 0l-5.571 3l-5.571-3"></path>
-        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Components</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-45" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-46" value="4">
@@ -618,9 +618,9 @@ exports[`Accordion > renders with type correctly 1`] = `
     </div>
   </div>
   <div data-state="closed" data-orientation="vertical" class="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-47" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5" width="1em" height="1em" viewBox="0 0 24 24">
+    <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="radix-vue-accordion-trigger-47" data-radix-vue-collection-item="" data-orientation="vertical" class="group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0"><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008z"></path>
-        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
+        </svg><span class="truncate">Utilities</span><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 20 20">
           <path fill="currentColor" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path>
         </svg></button></h3>
     <div role="region" open="false" hidden="" aria-labelledby="radix-vue-accordion-trigger-47" data-state="closed" data-orientation="vertical" style="--radix-accordion-content-width: var(--radix-collapsible-content-width); --radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;" class="text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none" id="radix-vue-collapsible-content-48" value="5">

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

@@ -0,0 +1,70 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DropdownMenu > renders basic case correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-radix-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-radix-menu-content="" data-state="open" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-1" aria-labelledby="" class="min-w-48 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[dropdown-menu-open_100ms_ease-out] data-[state=closed]:animate-[dropdown-menu-closed_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div role="group" class="p-1"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span>
+        <!--v-if-->
+      </button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Edit</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">E</kbd></span></span>
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Duplicate</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">D</kbd></span></span>
+      </button></div>
+  </div>
+</div>
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`DropdownMenu > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-radix-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-radix-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; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-2" aria-labelledby="" class="bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[dropdown-menu-open_100ms_ease-out] data-[state=closed]:animate-[dropdown-menu-closed_100ms_ease-in] min-w-96" data-side="bottom" data-align="center">
+    <div role="group" class="p-1"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span>
+        <!--v-if-->
+      </button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Edit</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">E</kbd></span></span>
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Duplicate</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">D</kbd></span></span>
+      </button></div>
+  </div>
+</div>
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`DropdownMenu > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-radix-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-radix-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; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;" data-dismissable-layer="" id="radix-vue-dropdown-menu-content-3" aria-labelledby="" class="min-w-48 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[dropdown-menu-open_100ms_ease-out] data-[state=closed]:animate-[dropdown-menu-closed_100ms_ease-in]" data-side="bottom" data-align="center">
+    <div role="group" class="p-1"><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span>
+        <!--v-if-->
+      </button><button type="button" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Edit</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">E</kbd></span></span>
+      </button><button type="button" disabled="" role="menuitem" tabindex="-1" data-radix-vue-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 text-gray-700 dark:text-gray-200 data-[highlighted]:text-gray-900 dark:data-[highlighted]:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[highlighted]:before:bg-gray-50 dark:data-[highlighted]:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50">
+        <!----><span class="truncate">Duplicate</span><span class="ms-auto inline-flex"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">D</kbd></span></span>
+      </button></div>
+  </div>
+</div>
+
+
+
+<!--teleport end-->"
+`;

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

@@ -2,7 +2,7 @@
 
 exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-900 dark:text-white"></button>"`;
 
-exports[`Link > renders with as correctly 1`] = `"<div type="button" disabled="false" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></div>"`;
+exports[`Link > renders with as correctly 1`] = `"<div class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></div>"`;
 
 exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium"></button>"`;
 

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

@@ -4,20 +4,20 @@ exports[`NavigationMenu > renders basic case correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative w-full flex items-center justify-between">
   <div style="position: relative;">
     <ul class="flex items-center min-w-0" data-orientation="horizontal">
-      <li data-menu-item="" 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:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span></button></li>
-      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" 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-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span><span class="ms-auto"><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 rounded">100</span></span></button></li>
+      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
-          </svg><span class="truncate relative">Modal</span>
+          </svg><span class="truncate">Modal</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-          </svg><span class="truncate relative">NavigationMenu</span>
+          </svg><span class="truncate">NavigationMenu</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
-          </svg><span class="truncate relative">Popover</span>
+          </svg><span class="truncate">Popover</span>
           <!--v-if-->
         </a></li>
     </ul>
@@ -29,20 +29,20 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative flex items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="flex items-center min-w-0" data-orientation="horizontal">
-      <li data-menu-item="" 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:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span></button></li>
-      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" 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-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span><span class="ms-auto"><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 rounded">100</span></span></button></li>
+      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
-          </svg><span class="truncate relative">Modal</span>
+          </svg><span class="truncate">Modal</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-          </svg><span class="truncate relative">NavigationMenu</span>
+          </svg><span class="truncate">NavigationMenu</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
-          </svg><span class="truncate relative">Popover</span>
+          </svg><span class="truncate">Popover</span>
           <!--v-if-->
         </a></li>
     </ul>
@@ -54,20 +54,20 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative w-full flex items-center justify-between">
   <div style="position: relative;">
     <ul class="flex items-center min-w-0" data-orientation="horizontal">
-      <li data-menu-item="" 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:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span></button></li>
-      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 relative w-4 h-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" 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-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span><span class="ms-auto"><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 rounded">100</span></span></button></li>
+      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
-          </svg><span class="truncate relative">Modal</span>
+          </svg><span class="truncate">Modal</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 relative w-4 h-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-          </svg><span class="truncate relative">NavigationMenu</span>
+          </svg><span class="truncate">NavigationMenu</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 relative w-4 h-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
-          </svg><span class="truncate relative">Popover</span>
+          </svg><span class="truncate">Popover</span>
           <!--v-if-->
         </a></li>
     </ul>
@@ -79,20 +79,20 @@ exports[`NavigationMenu > renders with vertical orientation correctly 1`] = `
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" class="relative flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200 dark:divide-gray-800">
   <div style="position: relative;">
     <ul class="" data-orientation="vertical">
-      <li data-menu-item="" class=""><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span></button></li>
-      <li data-menu-item="" class=""><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class=""><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-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Profile</span><span class="ms-auto"><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 rounded">100</span></span></button></li>
+      <li data-menu-item="" class=""><a href="/modal" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
-          </svg><span class="truncate relative">Modal</span>
+          </svg><span class="truncate">Modal</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class=""><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class=""><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
-          </svg><span class="truncate relative">NavigationMenu</span>
+          </svg><span class="truncate">NavigationMenu</span>
           <!--v-if-->
         </a></li>
-      <li data-menu-item="" class=""><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+      <li data-menu-item="" class=""><a href="/popover" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><svg data-v-b97f0f09="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
-          </svg><span class="truncate relative">Popover</span>
+          </svg><span class="truncate">Popover</span>
           <!--v-if-->
         </a></li>
     </ul>