arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 02:40:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(deps): update all non-major dependencies (v3) (#2985)

Browse Source 
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
renovate[bot]
2025-01-06 17:17:03 +01:00
committed by GitHub
parent 0128c1c9e0
commit 8c88912a8f
12 changed files with 108 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
test/components/__snapshots__/DropdownMenu-vue.spec.ts.snap
View File

@@ -25,7 +25,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -63,7 +63,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -101,7 +101,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -139,7 +139,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -177,7 +177,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -209,7 +209,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
<!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item slot</button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item slot</button></div>
</div>
@@ -245,7 +245,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -283,7 +283,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5">Item leading slot<span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10">Item leading slot<span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -315,7 +315,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
<!--teleport end--><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">New team<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!----></span></button></div>
</div>
@@ -351,7 +351,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -391,7 +391,7 @@ exports[`DropdownMenu > renders with labelKey correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-life-buoy<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-key-round<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-log-out<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -429,7 +429,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-sm gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-sm gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -467,7 +467,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-5 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>
@@ -505,7 +505,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-xs gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">Q</kbd></span>
<!----></span>
@@ -543,7 +543,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-2 text-base gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-2 text-base gap-2 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-6 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-1"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-6 min-w-[24px] text-[12px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-6 min-w-[24px] text-[12px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-6 min-w-[24px] text-[12px]">Q</kbd></span>
<!----></span>
@@ -581,7 +581,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1 text-xs gap-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1 text-xs gap-1 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors size-4 text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-4 min-w-[16px] text-[10px]">Q</kbd></span>
<!----></span>
@@ -619,7 +619,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
</button>
</div>
<div role="group" class="p-1 isolate"><a href="https://github.com/nuxt/ui" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a><a href="/components/dropdown-menu" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Support<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></a>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" data-reka-collection-item="" aria-disabled="true" data-disabled="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-[var(--ui-border)]"></div><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Keyboard Shortcuts<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button><button type="button" disabled="" role="menuitem" tabindex="-1" aria-disabled="true" data-disabled="" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">API<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><!----></span></button>
</div>
<div role="group" class="p-1 isolate"><button type="button" role="menuitem" tabindex="-1" data-reka-collection-item="" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors p-1.5 text-sm gap-1.5 text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transition-colors text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)] size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Logout<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="hidden lg:inline-flex items-center shrink-0 gap-0.5"><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⇧</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">⊞</kbd><kbd class="inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)] h-5 min-w-[20px] text-[11px]">Q</kbd></span>
<!----></span>