diff --git a/docs/app/assets/icons/tiptap.svg b/docs/app/assets/icons/tiptap.svg
new file mode 100644
index 0000000000..aaf0cf2cb7
--- /dev/null
+++ b/docs/app/assets/icons/tiptap.svg
@@ -0,0 +1,7 @@
+<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2499 0C8.40798 0 6.68237 0.497993 5.20039 1.36667C4.90185 1.54167 4.77093 1.93059 5.02448 2.16608C5.24757 2.37329 5.54646 2.5 5.87494 2.5H14.6248C14.9533 2.5 15.2522 2.37329 15.4753 2.16608C15.7289 1.93059 15.5979 1.54167 15.2994 1.36667C13.8174 0.497993 12.0918 0 10.2499 0Z" fill="currentColor"></path>
+<path d="M20.2498 10C20.2498 9.30963 19.6902 8.75 18.9998 8.75H1.49999C0.809625 8.75 0.25 9.30963 0.25 10C0.25 10.6904 0.809625 11.25 1.49999 11.25H18.9998C19.6902 11.25 20.2498 10.6904 20.2498 10Z" fill="currentColor"></path>
+<path d="M15.4753 17.8339C15.7289 18.0694 15.5979 18.4583 15.2994 18.6333C13.8174 19.502 12.0918 20 10.2499 20C8.40798 20 6.68236 19.502 5.20039 18.6333C4.90185 18.4583 4.77092 18.0694 5.02447 17.8339C5.24756 17.6267 5.54646 17.5 5.87494 17.5H14.6248C14.9533 17.5 15.2522 17.6267 15.4753 17.8339Z" fill="currentColor"></path>
+<path d="M1.49999 5.625C1.49999 4.93463 2.05961 4.375 2.74997 4.375H17.7498C18.4402 4.375 18.9998 4.93463 18.9998 5.625C18.9998 6.31537 18.4402 6.875 17.7498 6.875H2.74997C2.05961 6.875 1.49999 6.31537 1.49999 5.625Z" fill="currentColor"></path>
+<path d="M1.49999 14.375C1.49999 13.6846 2.05961 13.125 2.74997 13.125H17.7498C18.4402 13.125 18.9998 13.6846 18.9998 14.375C18.9998 15.0654 18.4402 15.625 17.7498 15.625H2.74997C2.05961 15.625 1.49999 15.0654 1.49999 14.375Z" fill="currentColor"></path>
+</svg>
diff --git a/docs/app/components/VersionMenu.vue b/docs/app/components/VersionMenu.vue
index 3c637f033a..e415d0c4bb 100644
--- a/docs/app/components/VersionMenu.vue
+++ b/docs/app/components/VersionMenu.vue
@@ -25,7 +25,7 @@ const items = computed(() => {
       trailing-icon="i-lucide-chevron-down"
       size="xs"
       class="-mb-[6px] font-semibold rounded-full truncate"
-      :class="[open && 'bg-primary/15 ']"
+      :class="[open && 'bg-primary/15']"
       :ui="{
         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
       }"
diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index eba9e0871a..bb7c5bc6e8 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -97,6 +97,10 @@ const props = defineProps<{
    * Whether to add overflow-hidden to wrapper
    */
   overflowHidden?: boolean
+  /**
+   * Whether to add background-elevated to wrapper
+   */
+  elevated?: boolean
 }>()
 
 const route = useRoute()
@@ -416,7 +420,7 @@ const { data: ast } = await useAsyncData(codeKey, async () => {
         </template>
       </div>
 
-      <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
+      <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden, 'dark:bg-neutral-950/50': props.elevated }]">
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <slot :name="slot" mdc-unwrap="p">
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 392edcf298..77cea7969c 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -59,9 +59,15 @@ const props = withDefaults(defineProps<{
    * Whether to add overflow-hidden to wrapper
    */
   overflowHidden?: boolean
+  /**
+   * Whether to add background-elevated to wrapper
+   */
+  elevated?: boolean
+  lang?: string
 }>(), {
   preview: true,
-  source: true
+  source: true,
+  lang: 'vue'
 })
 
 const slots = defineSlots<{
@@ -88,7 +94,7 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue ${props.preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
+  code += `\`\`\`${props.lang} ${props.preview ? '' : ` [${data.pascalName}.${props.lang}]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
 ${data?.code ?? ''}
 \`\`\``
 
@@ -208,9 +214,9 @@ const urlSearchParams = computed(() => {
           v-bind="typeof iframe === 'object' ? iframe : {}"
           :src="`/examples/${name}?${urlSearchParams}`"
           class="relative w-full"
-          :class="[props.class, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
+          :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
         />
-        <div v-else class="flex justify-center p-4" :class="props.class">
+        <div v-else class="flex justify-center p-4" :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }]">
           <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
diff --git a/docs/app/components/content/examples/editor/EditorDragHandleDropdownMenuExample.vue b/docs/app/components/content/examples/editor/EditorDragHandleDropdownMenuExample.vue
new file mode 100644
index 0000000000..1ab5790d16
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorDragHandleDropdownMenuExample.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+import type { Editor, JSONContent } from '@tiptap/vue-3'
+
+const value = ref(`Hover over the left side to see both drag handle and menu button.
+
+Click the menu to see block actions. Try duplicating or deleting a block.`)
+
+const selectedNode = ref<{ node: JSONContent, pos: number }>()
+
+const items = (editor: Editor): DropdownMenuItem[][] => {
+  if (!selectedNode.value?.node?.type) {
+    return []
+  }
+
+  return mapEditorItems(editor, [[
+    {
+      type: 'label',
+      label: upperFirst(selectedNode.value.node.type)
+    },
+    {
+      label: 'Turn into',
+      icon: 'i-lucide-repeat-2',
+      children: [
+        { kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' },
+        { kind: 'heading', level: 1, label: 'Heading 1', icon: 'i-lucide-heading-1' },
+        { kind: 'heading', level: 2, label: 'Heading 2', icon: 'i-lucide-heading-2' },
+        { kind: 'heading', level: 3, label: 'Heading 3', icon: 'i-lucide-heading-3' },
+        { kind: 'heading', level: 4, label: 'Heading 4', icon: 'i-lucide-heading-4' },
+        { kind: 'bulletList', label: 'Bullet List', icon: 'i-lucide-list' },
+        { kind: 'orderedList', label: 'Ordered List', icon: 'i-lucide-list-ordered' },
+        { kind: 'blockquote', label: 'Blockquote', icon: 'i-lucide-text-quote' },
+        { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-square-code' }
+      ]
+    },
+    {
+      kind: 'clearFormatting',
+      pos: selectedNode.value?.pos,
+      label: 'Reset formatting',
+      icon: 'i-lucide-rotate-ccw'
+    }
+  ], [
+    {
+      kind: 'duplicate',
+      pos: selectedNode.value?.pos,
+      label: 'Duplicate',
+      icon: 'i-lucide-copy'
+    },
+    {
+      label: 'Copy to clipboard',
+      icon: 'i-lucide-clipboard',
+      onSelect: async () => {
+        if (!selectedNode.value) return
+
+        const pos = selectedNode.value.pos
+        const node = editor.state.doc.nodeAt(pos)
+        if (node) {
+          await navigator.clipboard.writeText(node.textContent)
+        }
+      }
+    }
+  ], [
+    {
+      kind: 'moveUp',
+      pos: selectedNode.value?.pos,
+      label: 'Move up',
+      icon: 'i-lucide-arrow-up'
+    },
+    {
+      kind: 'moveDown',
+      pos: selectedNode.value?.pos,
+      label: 'Move down',
+      icon: 'i-lucide-arrow-down'
+    }
+  ], [
+    {
+      kind: 'delete',
+      pos: selectedNode.value?.pos,
+      label: 'Delete',
+      icon: 'i-lucide-trash'
+    }
+  ]]) as DropdownMenuItem[][]
+}
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-19"
+  >
+    <UEditorDragHandle v-slot="{ ui }" :editor="editor" @node-change="selectedNode = $event">
+      <UDropdownMenu
+        v-slot="{ open }"
+        :modal="false"
+        :items="items(editor)"
+        :content="{ side: 'left' }"
+        :ui="{ content: 'w-48', label: 'text-xs' }"
+        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+      >
+        <UButton
+          icon="i-lucide-grip-vertical"
+          color="neutral"
+          variant="ghost"
+          active-variant="soft"
+          size="sm"
+          :active="open"
+          :class="ui.handle()"
+        />
+      </UDropdownMenu>
+    </UEditorDragHandle>
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorDragHandleExample.vue b/docs/app/components/content/examples/editor/EditorDragHandleExample.vue
new file mode 100644
index 0000000000..584719b361
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorDragHandleExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const value = ref(`# Drag Handle
+
+Hover over the left side of this block to see the drag handle appear and reorder blocks.`)
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-21"
+  >
+    <UEditorDragHandle :editor="editor" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorDragHandleSuggestionMenuExample.vue b/docs/app/components/content/examples/editor/EditorDragHandleSuggestionMenuExample.vue
new file mode 100644
index 0000000000..f58c666dcc
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorDragHandleSuggestionMenuExample.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { EditorSuggestionMenuItem } from '@nuxt/ui'
+
+const value = ref(`Click the plus button to open the suggestion menu and add new blocks.
+
+The button appears when hovering over blocks.`)
+
+const suggestionItems: EditorSuggestionMenuItem[][] = [[{
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}]]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor, handlers }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-35"
+    :ui="{ base: 'p-8 sm:px-16' }"
+  >
+    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor">
+      <UButton
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+        @click="(e) => {
+          e.stopPropagation()
+
+          const selected = onClick()
+          handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
+        }"
+      />
+
+      <UButton
+        icon="i-lucide-grip-vertical"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+      />
+    </UEditorDragHandle>
+
+    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorEmojiMenuExample.vue b/docs/app/components/content/examples/editor/EditorEmojiMenuExample.vue
new file mode 100644
index 0000000000..a44ebe6fc5
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorEmojiMenuExample.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { EditorEmojiMenuItem } from '@nuxt/ui'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+
+const value = ref(`# Emoji Menu
+
+Type : to insert emojis and select from the list of available emojis.`)
+
+const items: EditorEmojiMenuItem[] = gitHubEmojis.filter(emoji => !emoji.name.startsWith('regional_indicator_'))
+
+// SSR-safe function to append menus to body (avoids z-index issues in docs)
+const appendToBody = import.meta.client ? () => document.body : undefined
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    :extensions="[Emoji]"
+    content-type="markdown"
+    placeholder="Type : to add emojis..."
+    class="w-full min-h-21"
+  >
+    <UEditorEmojiMenu :editor="editor" :items="items" :append-to="appendToBody" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorEmojiMenuItemsExample.vue b/docs/app/components/content/examples/editor/EditorEmojiMenuItemsExample.vue
new file mode 100644
index 0000000000..a7c4944687
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorEmojiMenuItemsExample.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { EditorEmojiMenuItem } from '@nuxt/ui'
+import { Emoji } from '@tiptap/extension-emoji'
+
+const value = ref(`Type : to see a custom emoji set.
+
+You can also install the \`@tiptap/extension-emoji\` extension to use a comprehensive set with over 1800 emojis.`)
+
+const items: EditorEmojiMenuItem[] = [{
+  name: 'smile',
+  emoji: '😄',
+  shortcodes: ['smile'],
+  tags: ['happy', 'joy', 'pleased']
+}, {
+  name: 'heart',
+  emoji: '❤️',
+  shortcodes: ['heart'],
+  tags: ['love', 'like']
+}, {
+  name: 'thumbsup',
+  emoji: '👍',
+  shortcodes: ['thumbsup', '+1'],
+  tags: ['approve', 'ok']
+}, {
+  name: 'fire',
+  emoji: '🔥',
+  shortcodes: ['fire'],
+  tags: ['hot', 'burn']
+}, {
+  name: 'rocket',
+  emoji: '🚀',
+  shortcodes: ['rocket'],
+  tags: ['ship', 'launch']
+}, {
+  name: 'eyes',
+  emoji: '👀',
+  shortcodes: ['eyes'],
+  tags: ['look', 'watch']
+}, {
+  name: 'tada',
+  emoji: '🎉',
+  shortcodes: ['tada'],
+  tags: ['party', 'celebration']
+}, {
+  name: 'thinking',
+  emoji: '🤔',
+  shortcodes: ['thinking'],
+  tags: ['hmm', 'think', 'consider']
+}]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    :extensions="[Emoji]"
+    content-type="markdown"
+    placeholder="Type : to add emojis..."
+    class="w-full min-h-26"
+  >
+    <UEditorEmojiMenu :editor="editor" :items="items" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorExample.vue b/docs/app/components/content/examples/editor/EditorExample.vue
new file mode 100644
index 0000000000..a3b40d7a95
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorExample.vue
@@ -0,0 +1,585 @@
+<script setup lang="ts">
+import type { EditorCustomHandlers, EditorToolbarItem, EditorSuggestionMenuItem, EditorMentionMenuItem, EditorEmojiMenuItem, DropdownMenuItem } from '@nuxt/ui'
+import type { Editor, JSONContent } from '@tiptap/vue-3'
+import { upperFirst } from 'scule'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+import TextAlign from '@tiptap/extension-text-align'
+import ImageUpload from './EditorImageUpload'
+import EditorLinkPopover from './EditorLinkPopover.vue'
+
+const value = ref(`# Building Modern Interfaces with Nuxt UI
+
+Welcome to the **Nuxt UI Editor** — a powerful rich text editing experience built on [TipTap](https://tiptap.dev). This editor combines *flexibility* with ease of use, making content creation a breeze.
+
+![Placeholder](/placeholder.jpeg)
+
+## Rich Formatting Options
+
+The editor supports all common text formatting including **bold**, *italic*, <u>underline</u>, ~~strikethrough~~, and \`inline code\`. You can also combine them for **_bold and italic_** text.
+
+### Interactive Features
+
+Try out these powerful capabilities:
+
+- **Bubble Menu** — Select any text to see formatting options appear
+- **Slash Commands** — Type \`/\` for quick access to blocks and formatting
+- **Mentions** — Use \`@\` to tag people or entities
+- **Emoji Picker** — Type \`:\` followed by an emoji name like :smile:
+- **Drag & Drop** — Hover over any block to see the drag handle
+
+> **Pro tip:** You can use keyboard shortcuts like Cmd/Ctrl + B for bold, Cmd/Ctrl + I for italic, and more!
+
+### Advanced Capabilities
+
+1. **Custom Extensions** — Add your own TipTap extensions seamlessly
+2. **Multiple Content Types** — Support for JSON, HTML, and Markdown
+3. **Customizable Toolbars** — Fixed, bubble, and floating layouts
+4. **Theme Integration** — Fully styled with Nuxt UI theme system
+
+#### Code Blocks
+
+Perfect for technical documentation:
+
+\`\`\`
+<template>
+  <UEditor v-model="value" content-type="markdown" />
+</template>
+\`\`\`
+
+---
+
+Whether you're building a blog, documentation site, or content management system, the Nuxt UI Editor provides everything you need for a professional editing experience. Visit [ui.nuxt.com](https://ui.nuxt.com) to explore more components.`)
+
+const customHandlers = {
+  imageUpload: {
+    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor: Editor) => editor.chain().focus().insertContent({ type: 'imageUpload' }),
+    isActive: (editor: Editor) => editor.isActive('imageUpload'),
+    isDisabled: undefined
+  }
+} satisfies EditorCustomHandlers
+
+const fixedToolbarItems = [[{
+  kind: 'undo',
+  icon: 'i-lucide-undo',
+  tooltip: { text: 'Undo' }
+}, {
+  kind: 'redo',
+  icon: 'i-lucide-redo',
+  tooltip: { text: 'Redo' }
+}], [{
+  icon: 'i-lucide-heading',
+  tooltip: { text: 'Headings' },
+  content: {
+    align: 'start'
+  },
+  items: [{
+    kind: 'heading',
+    level: 1,
+    icon: 'i-lucide-heading-1',
+    label: 'Heading 1'
+  }, {
+    kind: 'heading',
+    level: 2,
+    icon: 'i-lucide-heading-2',
+    label: 'Heading 2'
+  }, {
+    kind: 'heading',
+    level: 3,
+    icon: 'i-lucide-heading-3',
+    label: 'Heading 3'
+  }, {
+    kind: 'heading',
+    level: 4,
+    icon: 'i-lucide-heading-4',
+    label: 'Heading 4'
+  }]
+}, {
+  icon: 'i-lucide-list',
+  tooltip: { text: 'Lists' },
+  content: {
+    align: 'start'
+  },
+  items: [{
+    kind: 'bulletList',
+    icon: 'i-lucide-list',
+    label: 'Bullet List'
+  }, {
+    kind: 'orderedList',
+    icon: 'i-lucide-list-ordered',
+    label: 'Ordered List'
+  }]
+}, {
+  kind: 'blockquote',
+  icon: 'i-lucide-text-quote',
+  tooltip: { text: 'Blockquote' }
+}, {
+  kind: 'codeBlock',
+  icon: 'i-lucide-square-code',
+  tooltip: { text: 'Code Block' }
+}], [{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold',
+  tooltip: { text: 'Bold' }
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic',
+  tooltip: { text: 'Italic' }
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline',
+  tooltip: { text: 'Underline' }
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough',
+  tooltip: { text: 'Strikethrough' }
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code',
+  tooltip: { text: 'Code' }
+}], [{
+  slot: 'link' as const,
+  icon: 'i-lucide-link'
+}, {
+  kind: 'imageUpload',
+  icon: 'i-lucide-image',
+  tooltip: { text: 'Image' }
+}], [{
+  icon: 'i-lucide-align-justify',
+  tooltip: { text: 'Text Align' },
+  content: {
+    align: 'end'
+  },
+  items: [{
+    kind: 'textAlign',
+    align: 'left',
+    icon: 'i-lucide-align-left',
+    label: 'Align Left'
+  }, {
+    kind: 'textAlign',
+    align: 'center',
+    icon: 'i-lucide-align-center',
+    label: 'Align Center'
+  }, {
+    kind: 'textAlign',
+    align: 'right',
+    icon: 'i-lucide-align-right',
+    label: 'Align Right'
+  }, {
+    kind: 'textAlign',
+    align: 'justify',
+    icon: 'i-lucide-align-justify',
+    label: 'Align Justify'
+  }]
+}]] satisfies EditorToolbarItem<typeof customHandlers>[][]
+
+const bubbleToolbarItems = [[{
+  label: 'Turn into',
+  trailingIcon: 'i-lucide-chevron-down',
+  activeColor: 'neutral',
+  activeVariant: 'ghost',
+  tooltip: { text: 'Turn into' },
+  content: {
+    align: 'start'
+  },
+  ui: {
+    label: 'text-xs'
+  },
+  items: [{
+    type: 'label',
+    label: 'Turn into'
+  }, {
+    kind: 'paragraph',
+    label: 'Paragraph',
+    icon: 'i-lucide-type'
+  }, {
+    kind: 'heading',
+    level: 1,
+    icon: 'i-lucide-heading-1',
+    label: 'Heading 1'
+  }, {
+    kind: 'heading',
+    level: 2,
+    icon: 'i-lucide-heading-2',
+    label: 'Heading 2'
+  }, {
+    kind: 'heading',
+    level: 3,
+    icon: 'i-lucide-heading-3',
+    label: 'Heading 3'
+  }, {
+    kind: 'heading',
+    level: 4,
+    icon: 'i-lucide-heading-4',
+    label: 'Heading 4'
+  }, {
+    kind: 'bulletList',
+    icon: 'i-lucide-list',
+    label: 'Bullet List'
+  }, {
+    kind: 'orderedList',
+    icon: 'i-lucide-list-ordered',
+    label: 'Ordered List'
+  }, {
+    kind: 'blockquote',
+    icon: 'i-lucide-text-quote',
+    label: 'Blockquote'
+  }, {
+    kind: 'codeBlock',
+    icon: 'i-lucide-square-code',
+    label: 'Code Block'
+  }]
+}], [{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold',
+  tooltip: { text: 'Bold' }
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic',
+  tooltip: { text: 'Italic' }
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline',
+  tooltip: { text: 'Underline' }
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough',
+  tooltip: { text: 'Strikethrough' }
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code',
+  tooltip: { text: 'Code' }
+}], [{
+  slot: 'link' as const,
+  icon: 'i-lucide-link'
+}, {
+  kind: 'imageUpload',
+  icon: 'i-lucide-image',
+  tooltip: { text: 'Image' }
+}], [{
+  icon: 'i-lucide-align-justify',
+  tooltip: { text: 'Text Align' },
+  content: {
+    align: 'end'
+  },
+  items: [{
+    kind: 'textAlign',
+    align: 'left',
+    icon: 'i-lucide-align-left',
+    label: 'Align Left'
+  }, {
+    kind: 'textAlign',
+    align: 'center',
+    icon: 'i-lucide-align-center',
+    label: 'Align Center'
+  }, {
+    kind: 'textAlign',
+    align: 'right',
+    icon: 'i-lucide-align-right',
+    label: 'Align Right'
+  }, {
+    kind: 'textAlign',
+    align: 'justify',
+    icon: 'i-lucide-align-justify',
+    label: 'Align Justify'
+  }]
+}]] satisfies EditorToolbarItem<typeof customHandlers>[][]
+
+const imageToolbarItems = (editor: Editor): EditorToolbarItem[][] => {
+  const node = editor.state.doc.nodeAt(editor.state.selection.from)
+
+  return [[{
+    icon: 'i-lucide-download',
+    to: node?.attrs?.src,
+    download: true,
+    tooltip: { text: 'Download' }
+  }, {
+    icon: 'i-lucide-refresh-cw',
+    tooltip: { text: 'Replace' },
+    onClick: () => {
+      const { state } = editor
+      const { selection } = state
+
+      const pos = selection.from
+      const node = state.doc.nodeAt(pos)
+
+      if (node && node.type.name === 'image') {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).insertContentAt(pos, { type: 'imageUpload' }).run()
+      }
+    }
+  }], [{
+    icon: 'i-lucide-trash',
+    tooltip: { text: 'Delete' },
+    onClick: () => {
+      const { state } = editor
+      const { selection } = state
+
+      const pos = selection.from
+      const node = state.doc.nodeAt(pos)
+
+      if (node && node.type.name === 'image') {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run()
+      }
+    }
+  }]]
+}
+
+const selectedNode = ref<{ node: JSONContent, pos: number }>()
+
+const handleItems = (editor: Editor): DropdownMenuItem[][] => {
+  if (!selectedNode.value?.node?.type) {
+    return []
+  }
+
+  return mapEditorItems(editor, [[
+    {
+      type: 'label',
+      label: upperFirst(selectedNode.value.node.type)
+    },
+    {
+      label: 'Turn into',
+      icon: 'i-lucide-repeat-2',
+      children: [
+        { kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' },
+        { kind: 'heading', level: 1, label: 'Heading 1', icon: 'i-lucide-heading-1' },
+        { kind: 'heading', level: 2, label: 'Heading 2', icon: 'i-lucide-heading-2' },
+        { kind: 'heading', level: 3, label: 'Heading 3', icon: 'i-lucide-heading-3' },
+        { kind: 'heading', level: 4, label: 'Heading 4', icon: 'i-lucide-heading-4' },
+        { kind: 'bulletList', label: 'Bullet List', icon: 'i-lucide-list' },
+        { kind: 'orderedList', label: 'Ordered List', icon: 'i-lucide-list-ordered' },
+        { kind: 'blockquote', label: 'Blockquote', icon: 'i-lucide-text-quote' },
+        { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-square-code' }
+      ]
+    },
+    {
+      kind: 'clearFormatting',
+      pos: selectedNode.value?.pos,
+      label: 'Reset formatting',
+      icon: 'i-lucide-rotate-ccw'
+    }
+  ], [
+    {
+      kind: 'duplicate',
+      pos: selectedNode.value?.pos,
+      label: 'Duplicate',
+      icon: 'i-lucide-copy'
+    },
+    {
+      label: 'Copy to clipboard',
+      icon: 'i-lucide-clipboard',
+      onSelect: async () => {
+        if (!selectedNode.value) return
+
+        const pos = selectedNode.value.pos
+        const node = editor.state.doc.nodeAt(pos)
+        if (node) {
+          await navigator.clipboard.writeText(node.textContent)
+        }
+      }
+    }
+  ], [
+    {
+      kind: 'moveUp',
+      pos: selectedNode.value?.pos,
+      label: 'Move up',
+      icon: 'i-lucide-arrow-up'
+    },
+    {
+      kind: 'moveDown',
+      pos: selectedNode.value?.pos,
+      label: 'Move down',
+      icon: 'i-lucide-arrow-down'
+    }
+  ], [
+    {
+      kind: 'delete',
+      pos: selectedNode.value?.pos,
+      label: 'Delete',
+      icon: 'i-lucide-trash'
+    }
+  ]], customHandlers) as DropdownMenuItem[][]
+}
+
+const suggestionItems = [[{
+  type: 'label',
+  label: 'Style'
+}, {
+  kind: 'paragraph',
+  label: 'Paragraph',
+  icon: 'i-lucide-type'
+}, {
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'heading',
+  level: 3,
+  label: 'Heading 3',
+  icon: 'i-lucide-heading-3'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'orderedList',
+  label: 'Numbered List',
+  icon: 'i-lucide-list-ordered'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}, {
+  kind: 'codeBlock',
+  label: 'Code Block',
+  icon: 'i-lucide-square-code'
+}], [{
+  type: 'label',
+  label: 'Insert'
+}, {
+  kind: 'mention',
+  label: 'Mention',
+  icon: 'i-lucide-at-sign'
+}, {
+  kind: 'emoji',
+  label: 'Emoji',
+  icon: 'i-lucide-smile-plus'
+}, {
+  kind: 'imageUpload',
+  label: 'Image',
+  icon: 'i-lucide-image'
+}, {
+  kind: 'horizontalRule',
+  label: 'Horizontal Rule',
+  icon: 'i-lucide-separator-horizontal'
+}]] satisfies EditorSuggestionMenuItem<typeof customHandlers>[][]
+
+const mentionItems: EditorMentionMenuItem[] = [{
+  label: 'benjamincanac',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+}, {
+  label: 'HugoRCD',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71938701?v=4' }
+}, {
+  label: 'romhml',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/25613751?v=4' }
+}, {
+  label: 'sandros94',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/13056429?v=4' }
+}, {
+  label: 'hywax',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/149865959?v=4' }
+}, {
+  label: 'J-Michalek',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71264422?v=4' }
+}, {
+  label: 'genu',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/928780?v=4' }
+}]
+
+const emojiItems: EditorEmojiMenuItem[] = gitHubEmojis.filter(emoji => !emoji.name.startsWith('regional_indicator_'))
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor, handlers }"
+    v-model="value"
+    content-type="markdown"
+    :extensions="[
+      Emoji,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      ImageUpload
+    ]"
+    :handlers="customHandlers"
+    placeholder="Write, type '/' for commands..."
+    :ui="{ base: 'p-8 sm:px-16 py-13.5' }"
+    class="w-full"
+  >
+    <UEditorToolbar :editor="editor" :items="fixedToolbarItems" class="border-b border-muted sticky top-0 inset-x-0 px-8 sm:px-16 py-2 z-50 bg-default overflow-x-auto">
+      <template #link>
+        <EditorLinkPopover :editor="editor" auto-open />
+      </template>
+    </UEditorToolbar>
+
+    <UEditorToolbar
+      :editor="editor"
+      :items="bubbleToolbarItems"
+      layout="bubble"
+      :should-show="({ editor, view, state }) => {
+        if (editor.isActive('imageUpload') || editor.isActive('image')) {
+          return false
+        }
+        const { selection } = state
+        return view.hasFocus() && !selection.empty
+      }"
+    >
+      <template #link>
+        <EditorLinkPopover :editor="editor" />
+      </template>
+    </UEditorToolbar>
+
+    <UEditorToolbar
+      :editor="editor"
+      :items="imageToolbarItems(editor)"
+      layout="bubble"
+      :should-show="({ editor, view }) => {
+        return editor.isActive('image') && view.hasFocus()
+      }"
+    />
+
+    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="selectedNode = $event">
+      <UButton
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+        @click="(e) => {
+          e.stopPropagation()
+
+          const selected = onClick()
+          handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
+        }"
+      />
+
+      <UDropdownMenu
+        v-slot="{ open }"
+        :modal="false"
+        :items="handleItems(editor)"
+        :content="{ side: 'left' }"
+        :ui="{ content: 'w-48', label: 'text-xs' }"
+        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+      >
+        <UButton
+          color="neutral"
+          variant="ghost"
+          active-variant="soft"
+          size="sm"
+          icon="i-lucide-grip-vertical"
+          :active="open"
+          :class="ui.handle()"
+        />
+      </UDropdownMenu>
+    </UEditorDragHandle>
+
+    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+    <UEditorMentionMenu :editor="editor" :items="mentionItems" />
+    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorImageUpload.ts b/docs/app/components/content/examples/editor/EditorImageUpload.ts
new file mode 100644
index 0000000000..44277cbcbb
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorImageUpload.ts
@@ -0,0 +1,40 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import type { CommandProps, NodeViewRenderer } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ImageUploadNodeComponent from './EditorImageUploadNode.vue'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      insertImageUpload: () => ReturnType
+    }
+  }
+}
+
+export default Node.create({
+  name: 'imageUpload',
+  group: 'block',
+  atom: true,
+  draggable: true,
+  addAttributes() {
+    return {}
+  },
+  parseHTML() {
+    return [{
+      tag: 'div[data-type="image-upload"]'
+    }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload' })]
+  },
+  addNodeView(): NodeViewRenderer {
+    return VueNodeViewRenderer(ImageUploadNodeComponent)
+  },
+  addCommands() {
+    return {
+      insertImageUpload: () => ({ commands }: CommandProps) => {
+        return commands.insertContent({ type: this.name })
+      }
+    }
+  }
+})
diff --git a/docs/app/components/content/examples/editor/EditorImageUploadExample.vue b/docs/app/components/content/examples/editor/EditorImageUploadExample.vue
new file mode 100644
index 0000000000..14d37033ce
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorImageUploadExample.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui'
+import type { Editor } from '@tiptap/vue-3'
+import ImageUpload from './EditorImageUpload'
+
+const value = ref(`# Image Upload
+
+This editor demonstrates how to create a custom TipTap extension with handlers. Click the image button in the toolbar to upload a file — it will show a custom [FileUpload](/docs/components/file-upload) interface before inserting the image.
+
+Try uploading an image below:
+
+`)
+
+const customHandlers = {
+  imageUpload: {
+    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor: Editor) => editor.chain().focus().insertContent({ type: 'imageUpload' }),
+    isActive: (editor: Editor) => editor.isActive('imageUpload'),
+    isDisabled: undefined
+  }
+} satisfies EditorCustomHandlers
+
+const items = [[{
+  icon: 'i-lucide-heading',
+  content: {
+    align: 'start'
+  },
+  items: [{
+    kind: 'heading',
+    level: 1,
+    icon: 'i-lucide-heading-1',
+    label: 'Heading 1'
+  }, {
+    kind: 'heading',
+    level: 2,
+    icon: 'i-lucide-heading-2',
+    label: 'Heading 2'
+  }, {
+    kind: 'heading',
+    level: 3,
+    icon: 'i-lucide-heading-3',
+    label: 'Heading 3'
+  }, {
+    kind: 'heading',
+    level: 4,
+    icon: 'i-lucide-heading-4',
+    label: 'Heading 4'
+  }]
+}], [{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline'
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough'
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code'
+}], [{
+  kind: 'imageUpload',
+  icon: 'i-lucide-image',
+  label: 'Add image'
+}]] satisfies EditorToolbarItem<typeof customHandlers>[][]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    :extensions="[ImageUpload]"
+    :handlers="customHandlers"
+    content-type="markdown"
+    :ui="{ base: 'p-8 sm:px-16' }"
+    class="w-full min-h-74"
+  >
+    <UEditorToolbar :editor="editor" :items="items" class="border-b border-muted py-2 px-8 sm:px-16 overflow-x-auto" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorImageUploadNode.vue b/docs/app/components/content/examples/editor/EditorImageUploadNode.vue
new file mode 100644
index 0000000000..7bc80e8fd2
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorImageUploadNode.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { NodeViewProps } from '@tiptap/vue-3'
+import { NodeViewWrapper } from '@tiptap/vue-3'
+
+const props = defineProps<NodeViewProps>()
+
+const file = ref<File | null>(null)
+const loading = ref(false)
+
+watch(file, async (newFile) => {
+  if (!newFile) return
+
+  loading.value = true
+
+  const reader = new FileReader()
+  reader.onload = async (e) => {
+    const dataUrl = e.target?.result as string
+    if (!dataUrl) {
+      loading.value = false
+      return
+    }
+
+    // Simulate upload delay
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    const pos = props.getPos()
+    if (typeof pos !== 'number') {
+      loading.value = false
+      return
+    }
+
+    props.editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + 1 })
+      .setImage({ src: dataUrl })
+      .run()
+
+    loading.value = false
+  }
+  reader.readAsDataURL(newFile)
+})
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <UFileUpload
+      v-model="file"
+      accept="image/*"
+      label="Upload an image"
+      description="SVG, PNG, JPG or GIF (max. 2MB)"
+      :preview="false"
+      class="min-h-48"
+    >
+      <template #leading>
+        <UAvatar
+          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
+          size="xl"
+          :class="[loading && 'animate-spin']"
+        />
+      </template>
+    </UFileUpload>
+  </NodeViewWrapper>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorLinkPopover.vue b/docs/app/components/content/examples/editor/EditorLinkPopover.vue
new file mode 100644
index 0000000000..12350d72a9
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorLinkPopover.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
+
+const props = defineProps<{
+  editor: Editor
+  autoOpen?: boolean
+}>()
+
+const open = ref(false)
+const url = ref('')
+
+const active = computed(() => props.editor.isActive('link'))
+const disabled = computed(() => {
+  if (!props.editor.isEditable) return true
+  const { selection } = props.editor.state
+  return selection.empty && !props.editor.isActive('link')
+})
+
+watch(() => props.editor, (editor, _, onCleanup) => {
+  if (!editor) return
+
+  const updateUrl = () => {
+    const { href } = editor.getAttributes('link')
+    url.value = href || ''
+  }
+
+  updateUrl()
+  editor.on('selectionUpdate', updateUrl)
+
+  onCleanup(() => {
+    editor.off('selectionUpdate', updateUrl)
+  })
+}, { immediate: true })
+
+watch(active, (isActive) => {
+  if (isActive && props.autoOpen) {
+    open.value = true
+  }
+})
+
+function setLink() {
+  if (!url.value) return
+
+  const { selection } = props.editor.state
+  const isEmpty = selection.empty
+
+  let chain = props.editor.chain().focus()
+  chain = chain.extendMarkRange('link').setLink({ href: url.value })
+
+  if (isEmpty) {
+    chain = chain.insertContent({ type: 'text', text: url.value })
+  }
+
+  chain.run()
+  open.value = false
+}
+
+function removeLink() {
+  props.editor
+    .chain()
+    .focus()
+    .extendMarkRange('link')
+    .unsetLink()
+    .setMeta('preventAutolink', true)
+    .run()
+
+  url.value = ''
+  open.value = false
+}
+
+function openLink() {
+  if (!url.value) return
+  window.open(url.value, '_blank', 'noopener,noreferrer')
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    setLink()
+  }
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open" :ui="{ content: 'p-0.5' }">
+    <UTooltip text="Link">
+      <UButton
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </UTooltip>
+
+    <template #content>
+      <UInput
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="flex items-center mr-0.5">
+          <UButton
+            icon="i-lucide-corner-down-left"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Apply link"
+            @click="setLink"
+          />
+
+          <USeparator orientation="vertical" class="h-6 mx-1" />
+
+          <UButton
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Open in new window"
+            @click="openLink"
+          />
+
+          <UButton
+            icon="i-lucide-trash"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Remove link"
+            @click="removeLink"
+          />
+        </div>
+      </UInput>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorMentionMenuExample.vue b/docs/app/components/content/examples/editor/EditorMentionMenuExample.vue
new file mode 100644
index 0000000000..0f8beedbeb
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorMentionMenuExample.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { EditorMentionMenuItem } from '@nuxt/ui'
+
+const value = ref(`# Mention Menu
+
+Type @ to mention someone and select from the list of available users.`)
+
+const items: EditorMentionMenuItem[] = [{
+  label: 'benjamincanac',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  label: 'atinux',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/904724?v=4'
+  }
+}, {
+  label: 'danielroe',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/28706372?v=4'
+  }
+}, {
+  label: 'pi0',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/5158436?v=4'
+  }
+}]
+
+// SSR-safe function to append menus to body (avoids z-index issues in docs)
+const appendToBody = import.meta.client ? () => document.body : undefined
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    placeholder="Type @ to mention someone..."
+    class="w-full min-h-21"
+  >
+    <UEditorMentionMenu :editor="editor" :items="items" :append-to="appendToBody" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorMentionMenuItemsExample.vue b/docs/app/components/content/examples/editor/EditorMentionMenuItemsExample.vue
new file mode 100644
index 0000000000..f48206f71e
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorMentionMenuItemsExample.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { EditorMentionMenuItem } from '@nuxt/ui'
+
+const value = ref(`Type @ to mention a user.
+
+You can customize the items with avatars, icons, and descriptions.`)
+
+const items: EditorMentionMenuItem[] = [{
+  label: 'benjamincanac',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+}, {
+  label: 'HugoRCD',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71938701?v=4' }
+}, {
+  label: 'romhml',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/25613751?v=4' }
+}, {
+  label: 'sandros94',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/13056429?v=4' }
+}, {
+  label: 'hywax',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/149865959?v=4' }
+}, {
+  label: 'J-Michalek',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71264422?v=4' }
+}, {
+  label: 'genu',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/928780?v=4' }
+}]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    placeholder="Type @ to mention..."
+    class="w-full min-h-19"
+  >
+    <UEditorMentionMenu :editor="editor" :items="items" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorSuggestionMenuExample.vue b/docs/app/components/content/examples/editor/EditorSuggestionMenuExample.vue
new file mode 100644
index 0000000000..79788f9c5e
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorSuggestionMenuExample.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EditorSuggestionMenuItem } from '@nuxt/ui'
+
+const value = ref(`# Suggestion Menu
+
+Type / to open the suggestion menu and browse available formatting commands.`)
+
+const items: EditorSuggestionMenuItem[][] = [[{
+  type: 'label',
+  label: 'Text'
+}, {
+  kind: 'paragraph',
+  label: 'Paragraph',
+  icon: 'i-lucide-type'
+}, {
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'heading',
+  level: 3,
+  label: 'Heading 3',
+  icon: 'i-lucide-heading-3'
+}], [{
+  type: 'label',
+  label: 'Lists'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'orderedList',
+  label: 'Numbered List',
+  icon: 'i-lucide-list-ordered'
+}], [{
+  type: 'label',
+  label: 'Insert'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}, {
+  kind: 'codeBlock',
+  label: 'Code Block',
+  icon: 'i-lucide-square-code'
+}, {
+  kind: 'horizontalRule',
+  label: 'Divider',
+  icon: 'i-lucide-separator-horizontal'
+}]]
+
+// SSR-safe function to append menus to body (avoids z-index issues in docs)
+const appendToBody = import.meta.client ? () => document.body : undefined
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    placeholder="Type / for commands..."
+    class="w-full min-h-21"
+  >
+    <UEditorSuggestionMenu :editor="editor" :items="items" :append-to="appendToBody" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorSuggestionMenuItemsExample.vue b/docs/app/components/content/examples/editor/EditorSuggestionMenuItemsExample.vue
new file mode 100644
index 0000000000..c0e81752f5
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorSuggestionMenuItemsExample.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { EditorSuggestionMenuItem } from '@nuxt/ui'
+
+const value = ref(`Type / to see a list of commands.
+
+You can customize the items with icons, labels, and descriptions.`)
+
+const items: EditorSuggestionMenuItem[][] = [[{
+  type: 'label',
+  label: 'Text Styles'
+}, {
+  kind: 'paragraph',
+  label: 'Paragraph',
+  icon: 'i-lucide-type'
+}, {
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'heading',
+  level: 3,
+  label: 'Heading 3',
+  icon: 'i-lucide-heading-3'
+}], [{
+  type: 'label',
+  label: 'Lists'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'orderedList',
+  label: 'Numbered List',
+  icon: 'i-lucide-list-ordered'
+}], [{
+  type: 'label',
+  label: 'Blocks'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}, {
+  kind: 'codeBlock',
+  label: 'Code Block',
+  icon: 'i-lucide-square-code'
+}, {
+  kind: 'horizontalRule',
+  label: 'Divider',
+  icon: 'i-lucide-separator-horizontal'
+}]]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    placeholder="Type / for commands..."
+    class="w-full min-h-19"
+  >
+    <UEditorSuggestionMenu :editor="editor" :items="items" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorToolbarCustomSlotExample.vue b/docs/app/components/content/examples/editor/EditorToolbarCustomSlotExample.vue
new file mode 100644
index 0000000000..9ed9d09d1e
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorToolbarCustomSlotExample.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+import EditorLinkPopover from './EditorLinkPopover.vue'
+
+const value = ref(`Select text and click the link button to add a link with the custom popover.
+
+You can also edit existing links like [this one](https://ui.nuxt.com).`)
+
+const toolbarItems = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}, {
+  slot: 'link' as const
+}]] satisfies EditorToolbarItem[][]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-30 flex flex-col gap-4"
+  >
+    <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
+      <template #link>
+        <EditorLinkPopover :editor="editor" auto-open />
+      </template>
+    </UEditorToolbar>
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorToolbarExample.vue b/docs/app/components/content/examples/editor/EditorToolbarExample.vue
new file mode 100644
index 0000000000..ea3d28df7d
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorToolbarExample.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+
+const value = ref(`# Toolbar
+
+Select some text to see the formatting toolbar appear above your selection.`)
+
+const items: EditorToolbarItem[][] = [[{
+  icon: 'i-lucide-heading',
+  tooltip: { text: 'Headings' },
+  content: {
+    align: 'start'
+  },
+  items: [{
+    kind: 'heading',
+    level: 1,
+    icon: 'i-lucide-heading-1',
+    label: 'Heading 1'
+  }, {
+    kind: 'heading',
+    level: 2,
+    icon: 'i-lucide-heading-2',
+    label: 'Heading 2'
+  }, {
+    kind: 'heading',
+    level: 3,
+    icon: 'i-lucide-heading-3',
+    label: 'Heading 3'
+  }, {
+    kind: 'heading',
+    level: 4,
+    icon: 'i-lucide-heading-4',
+    label: 'Heading 4'
+  }]
+}], [{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold',
+  tooltip: { text: 'Bold' }
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic',
+  tooltip: { text: 'Italic' }
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline',
+  tooltip: { text: 'Underline' }
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough',
+  tooltip: { text: 'Strikethrough' }
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code',
+  tooltip: { text: 'Code' }
+}]]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-21"
+  >
+    <UEditorToolbar :editor="editor" :items="items" layout="bubble" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorToolbarImageExample.vue b/docs/app/components/content/examples/editor/EditorToolbarImageExample.vue
new file mode 100644
index 0000000000..c26ab68f06
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorToolbarImageExample.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
+import type { EditorToolbarItem } from '@nuxt/ui'
+
+const value = ref(`Click on the image below to see the image-specific toolbar:
+
+![Image Placeholder](/placeholder.jpeg)`)
+
+const items = (editor: Editor): EditorToolbarItem[][] => {
+  const node = editor.state.doc.nodeAt(editor.state.selection.from)
+
+  return [[{
+    icon: 'i-lucide-download',
+    to: node?.attrs?.src,
+    download: true,
+    tooltip: { text: 'Download' }
+  }], [{
+    icon: 'i-lucide-trash',
+    tooltip: { text: 'Delete' },
+    onClick: () => {
+      const { state } = editor
+      const { selection } = state
+
+      const pos = selection.from
+      const node = state.doc.nodeAt(pos)
+
+      if (node && node.type.name === 'image') {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run()
+      }
+    }
+  }]]
+}
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-113"
+  >
+    <UEditorToolbar
+      :editor="editor"
+      :items="items(editor)"
+      layout="bubble"
+      :should-show="({ editor, view }) => {
+        return editor.isActive('image') && view.hasFocus()
+      }"
+    />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorToolbarItemsExample.vue b/docs/app/components/content/examples/editor/EditorToolbarItemsExample.vue
new file mode 100644
index 0000000000..5bc26c0ca4
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorToolbarItemsExample.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+import TextAlign from '@tiptap/extension-text-align'
+
+const value = ref(`This toolbar showcases **all available formatting options** using built-in handlers. Try the different controls to see them in action!
+
+You can apply **bold**, *italic*, <u>underline</u>, ~~strikethrough~~, and \`inline code\` formatting to your text.
+`)
+
+const items: EditorToolbarItem[][] = [
+  // History controls
+  [{
+    kind: 'undo',
+    icon: 'i-lucide-undo',
+    tooltip: { text: 'Undo' }
+  }, {
+    kind: 'redo',
+    icon: 'i-lucide-redo',
+    tooltip: { text: 'Redo' }
+  }],
+  // Block types
+  [{
+    icon: 'i-lucide-heading',
+    tooltip: { text: 'Headings' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'heading',
+      level: 1,
+      icon: 'i-lucide-heading-1',
+      label: 'Heading 1'
+    }, {
+      kind: 'heading',
+      level: 2,
+      icon: 'i-lucide-heading-2',
+      label: 'Heading 2'
+    }, {
+      kind: 'heading',
+      level: 3,
+      icon: 'i-lucide-heading-3',
+      label: 'Heading 3'
+    }, {
+      kind: 'heading',
+      level: 4,
+      icon: 'i-lucide-heading-4',
+      label: 'Heading 4'
+    }]
+  }, {
+    icon: 'i-lucide-list',
+    tooltip: { text: 'Lists' },
+    content: {
+      align: 'start'
+    },
+    items: [{
+      kind: 'bulletList',
+      icon: 'i-lucide-list',
+      label: 'Bullet List'
+    }, {
+      kind: 'orderedList',
+      icon: 'i-lucide-list-ordered',
+      label: 'Ordered List'
+    }]
+  }, {
+    kind: 'blockquote',
+    icon: 'i-lucide-text-quote',
+    tooltip: { text: 'Blockquote' }
+  }, {
+    kind: 'codeBlock',
+    icon: 'i-lucide-square-code',
+    tooltip: { text: 'Code Block' }
+  }, {
+    kind: 'horizontalRule',
+    icon: 'i-lucide-separator-horizontal',
+    tooltip: { text: 'Horizontal Rule' }
+  }],
+  // Text formatting
+  [{
+    kind: 'mark',
+    mark: 'bold',
+    icon: 'i-lucide-bold',
+    tooltip: { text: 'Bold' }
+  }, {
+    kind: 'mark',
+    mark: 'italic',
+    icon: 'i-lucide-italic',
+    tooltip: { text: 'Italic' }
+  }, {
+    kind: 'mark',
+    mark: 'underline',
+    icon: 'i-lucide-underline',
+    tooltip: { text: 'Underline' }
+  }, {
+    kind: 'mark',
+    mark: 'strike',
+    icon: 'i-lucide-strikethrough',
+    tooltip: { text: 'Strikethrough' }
+  }, {
+    kind: 'mark',
+    mark: 'code',
+    icon: 'i-lucide-code',
+    tooltip: { text: 'Code' }
+  }],
+  // Link
+  [{
+    kind: 'link',
+    icon: 'i-lucide-link',
+    tooltip: { text: 'Link' }
+  }],
+  // Text alignment
+  [{
+    icon: 'i-lucide-align-justify',
+    tooltip: { text: 'Text Align' },
+    content: {
+      align: 'end'
+    },
+    items: [{
+      kind: 'textAlign',
+      align: 'left',
+      icon: 'i-lucide-align-left',
+      label: 'Align Left'
+    }, {
+      kind: 'textAlign',
+      align: 'center',
+      icon: 'i-lucide-align-center',
+      label: 'Align Center'
+    }, {
+      kind: 'textAlign',
+      align: 'right',
+      icon: 'i-lucide-align-right',
+      label: 'Align Right'
+    }, {
+      kind: 'textAlign',
+      align: 'justify',
+      icon: 'i-lucide-align-justify',
+      label: 'Align Justify'
+    }]
+  }]
+]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    :extensions="[TextAlign.configure({ types: ['heading', 'paragraph'] })]"
+    class="w-full min-h-37 flex flex-col gap-4"
+  >
+    <UEditorToolbar :editor="editor" :items="items" class="sm:px-8 overflow-x-auto" />
+  </UEditor>
+</template>
diff --git a/docs/app/components/content/examples/editor/EditorToolbarLayoutExample.vue b/docs/app/components/content/examples/editor/EditorToolbarLayoutExample.vue
new file mode 100644
index 0000000000..c7f74ca84c
--- /dev/null
+++ b/docs/app/components/content/examples/editor/EditorToolbarLayoutExample.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+
+defineProps<{
+  layout: 'fixed' | 'bubble' | 'floating'
+}>()
+
+const value = ref(`Switch between layouts to see the different toolbar modes.
+
+The **fixed** layout displays the toolbar above the editor. The **bubble** layout shows the toolbar when you select text. The **floating** layout appears on empty lines.`)
+
+const items: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code'
+}]]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="value" content-type="markdown" class="w-full min-h-26 flex flex-col gap-4">
+    <UEditorToolbar
+      :key="layout"
+      :editor="editor"
+      :items="items"
+      :layout="layout"
+      :data-layout="layout"
+      class="data-[layout=fixed]:sm:px-8"
+    />
+  </UEditor>
+</template>
diff --git a/docs/app/composables/useNavigation.ts b/docs/app/composables/useNavigation.ts
index 47662b6418..817ee6c13b 100644
--- a/docs/app/composables/useNavigation.ts
+++ b/docs/app/composables/useNavigation.ts
@@ -29,7 +29,10 @@ const categories = {
     title: 'Dashboard'
   }, {
     id: 'chat',
-    title: 'Chat'
+    title: 'AI Chat'
+  }, {
+    id: 'editor',
+    title: 'Editor'
   }, {
     id: 'content',
     title: 'Content',
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index 93b0ee2493..518f79f496 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -32,7 +32,7 @@ watch(() => route.path, () => {
 
 defineShortcuts({
   '/': {
-    usingInput: true,
+    usingInput: false,
     handler: () => {
       input.value?.inputRef?.focus()
     }
diff --git a/docs/content.config.ts b/docs/content.config.ts
index 31619ce168..6491d6ca49 100644
--- a/docs/content.config.ts
+++ b/docs/content.config.ts
@@ -63,7 +63,7 @@ export const collections = {
       include: 'docs/**/*'
     }],
     schema: z.object({
-      category: z.enum(['layout', 'form', 'element', 'navigation', 'data', 'overlay', 'dashboard', 'page', 'ai', 'color-mode', 'i18n']).optional(),
+      category: z.enum(['layout', 'form', 'element', 'navigation', 'data', 'overlay', 'dashboard', 'page', 'chat', 'editor', 'color-mode', 'i18n']).optional(),
       framework: z.enum(['nuxt', 'vue']).optional(),
       navigation: z.object({
         title: z.string().optional()
diff --git a/docs/content/docs/1.getting-started/2.installation/1.nuxt.md b/docs/content/docs/1.getting-started/2.installation/1.nuxt.md
index 0f42edf350..79b2a0c673 100644
--- a/docs/content/docs/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/docs/1.getting-started/2.installation/1.nuxt.md
@@ -363,7 +363,7 @@ export default defineNuxtConfig({
 })
 ```
 
-### `theme.prefix` :badge{label="4.2+"}
+### `theme.prefix` :badge{label="4.2+" class="align-text-top"}
 
 Use the `theme.prefix` option to configure the same prefix you set on your Tailwind CSS import. This ensures Nuxt UI components use the correct prefixed utility classes and CSS variables.
 
@@ -453,7 +453,7 @@ export default defineNuxtConfig({
 })
 ```
 
-### `experimental.componentDetection` :badge{label="4.1+"}
+### `experimental.componentDetection` :badge{label="4.1+" class="align-text-top"}
 
 Use the `experimental.componentDetection` option to enable automatic component detection for tree-shaking. This feature scans your source code to detect which components are actually used and only generates the necessary CSS for those components (including their dependencies).
 
diff --git a/docs/content/docs/1.getting-started/2.installation/2.vue.md b/docs/content/docs/1.getting-started/2.installation/2.vue.md
index 59fb562ed9..aa9d4bcc0b 100644
--- a/docs/content/docs/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/docs/1.getting-started/2.installation/2.vue.md
@@ -658,7 +658,7 @@ export default defineConfig({
 })
 ```
 
-### `theme.prefix` :badge{label="4.2+"}
+### `theme.prefix` :badge{label="4.2+" class="align-text-top"}
 
 Use the `theme.prefix` option to configure the same prefix you set on your Tailwind CSS import. This ensures Nuxt UI components use the correct prefixed utility classes and CSS variables.
 
diff --git a/docs/content/docs/2.components/0.index.md b/docs/content/docs/2.components/0.index.md
index 759ec7f423..ac31e82c16 100644
--- a/docs/content/docs/2.components/0.index.md
+++ b/docs/content/docs/2.components/0.index.md
@@ -62,7 +62,7 @@ Specialized components for building dynamic dashboards with resizable panels, co
 Check out the **Dashboard template** on GitHub for a real-life example.
 ::
 
-## Chat
+## AI Chat
 
 Components for building conversational interfaces and chatbots, powered by the **[Vercel AI SDK](https://sdk.vercel.ai)**.
 
@@ -72,6 +72,16 @@ Components for building conversational interfaces and chatbots, powered by the *
 Check out the **AI Chat template** on GitHub for a real-life example.
 ::
 
+## Editor :badge{label="Soon" class="align-text-top"}
+
+Components for building a rich text editor with support for markdown, HTML, and JSON content types, powered by [TipTap](https://tiptap.dev/).
+
+:components-list{category="editor"}
+
+::note{to="https://github.com/nuxt-ui-templates/editor" target="_blank"}
+Check out the **Editor template** on GitHub for a real-life example.
+::
+
 ## Content
 
 Components that integrate with [Content](/docs/getting-started/integrations/content) for documentation sites, including table of contents, search, navigation trees, and surrounding page links.
diff --git a/docs/content/docs/2.components/command-palette.md b/docs/content/docs/2.components/command-palette.md
index 5ca1daf68a..1457cc5ffb 100644
--- a/docs/content/docs/2.components/command-palette.md
+++ b/docs/content/docs/2.components/command-palette.md
@@ -889,7 +889,7 @@ props:
 ---
 ::
 
-### With virtualization :badge{label="4.1+"}
+### With virtualization :badge{label="4.1+" class="align-text-top"}
 
 Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
 
diff --git a/docs/content/docs/2.components/editor-drag-handle.md b/docs/content/docs/2.components/editor-drag-handle.md
new file mode 100644
index 0000000000..865181a04e
--- /dev/null
+++ b/docs/content/docs/2.components/editor-drag-handle.md
@@ -0,0 +1,136 @@
+---
+title: EditorDragHandle
+description: A draggable handle for reordering and selecting blocks in the editor.
+category: editor
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/EditorDragHandle.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The EditorDragHandle component provides drag-and-drop functionality for reordering editor blocks using the `@tiptap/extension-drag-handle-vue-3` package.
+
+::caution
+It must be used inside an [Editor](/docs/components/editor) component's default slot to have access to the editor instance.
+::
+
+It extends the [Button](/docs/components/button) component, so you can pass any property such as `color`, `variant`, `size`, etc.
+
+::component-example
+---
+collapse: true
+elevated: true
+name: 'editor-drag-handle-example'
+class: 'p-8'
+---
+::
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/functionality/drag-handle-vue" target="_blank"}
+Learn more about the Drag Handle extension in the TipTap documentation.
+::
+
+### Icon
+
+Use the `icon` prop to customize the drag handle icon.
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorDragHandle :editor="editor" icon="i-lucide-move" />
+  </UEditor>
+</template>
+```
+
+::framework-only
+#nuxt
+:::tip{to="/docs/getting-started/integrations/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.drag` key.
+:::
+
+#vue
+:::tip{to="/docs/getting-started/integrations/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.drag` key.
+:::
+::
+
+### Options
+
+Use the `options` prop to customize the positioning behavior using [Floating UI options](https://floating-ui.com/docs/computeposition#options).
+
+::note
+The offset is automatically calculated to center the handle for small blocks and align it to the top for taller blocks.
+::
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorDragHandle
+      :editor="editor"
+      :options="{
+        placement: 'left'
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+## Examples
+
+### With dropdown menu
+
+Use the default slot to add a [DropdownMenu](/docs/components/dropdown-menu) with block-level actions like duplicate, delete, move up/down, or transform blocks into different types.
+
+Listen to the `@node-change` event to track the currently hovered node and its position, then use `editor.chain().setMeta('lockDragHandle', open).run()`{lang="ts-type"} to lock the handle position while the menu is open.
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-drag-handle-dropdown-menu-example'
+class: 'p-8'
+---
+::
+
+::note
+This example uses the `mapEditorItems` utility from `@nuxt/ui/utils/editor` to automatically map handler kinds (like `duplicate`, `delete`, `moveUp`, etc.) to their corresponding editor commands with proper state management.
+::
+
+### With suggestion menu
+
+Use the default slot to add a [Button](/docs/components/button) next to the drag handle to open the [EditorSuggestionMenu](/docs/components/editor-suggestion-menu).
+
+Call the `onClick` slot function to get the current node position, then use `handlers.suggestion?.execute(editor, { pos: node?.pos }).run()`{lang="ts-type"} to insert new blocks at that position.
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-drag-handle-suggestion-menu-example'
+class: '!p-0'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/editor-emoji-menu.md b/docs/content/docs/2.components/editor-emoji-menu.md
new file mode 100644
index 0000000000..5ca1478220
--- /dev/null
+++ b/docs/content/docs/2.components/editor-emoji-menu.md
@@ -0,0 +1,108 @@
+---
+title: EditorEmojiMenu
+description: "An emoji picker menu that displays emoji suggestions when typing the : character in the editor."
+category: editor
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/EditorEmojiMenu.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The EditorEmojiMenu component displays a menu of emoji suggestions when typing the `:` character in the editor and inserts the selected emoji. It works alongside the `@tiptap/extension-emoji` package to provide emoji support.
+
+::note
+It uses the `useEditorMenu` composable built on top of TipTap's [Suggestion](https://tiptap.dev/docs/editor/api/utilities/suggestion) utility to filter items as you type and support keyboard navigation (arrow keys, enter to select, escape to close).
+::
+
+::caution
+It must be used inside an [Editor](/docs/components/editor) component's default slot to have access to the editor instance.
+::
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-emoji-menu-example'
+class: 'p-8'
+---
+::
+
+::warning
+The `@tiptap/extension-emoji` package is not installed by default, you need to install it separately.
+::
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/nodes/emoji" target="_blank"}
+Learn more about the Emoji extension in the TipTap documentation.
+::
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `name: string`{lang="ts-type"}
+- `emoji: string`{lang="ts-type"}
+- `shortcodes?: string[]`{lang="ts-type"}
+- `tags?: string[]`{lang="ts-type"}
+- `group?: string`{lang="ts-type"}
+- `fallbackImage?: string`{lang="ts-type"}
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-emoji-menu-items-example'
+class: 'p-8'
+---
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
+### Char
+
+Use the `char` prop to change the trigger character. Defaults to `:`{lang="ts-type"}.
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorEmojiMenu :editor="editor" :items="items" char=";" />
+  </UEditor>
+</template>
+```
+
+### Options
+
+Use the `options` prop to customize the positioning behavior using [Floating UI options](https://floating-ui.com/docs/computeposition#options).
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorEmojiMenu
+      :editor="editor"
+      :items="items"
+      :options="{
+        placement: 'bottom-start',
+        offset: 4
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+## API
+
+### Props
+
+:component-props
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/editor-mention-menu.md b/docs/content/docs/2.components/editor-mention-menu.md
new file mode 100644
index 0000000000..1410b1f271
--- /dev/null
+++ b/docs/content/docs/2.components/editor-mention-menu.md
@@ -0,0 +1,103 @@
+---
+title: EditorMentionMenu
+description: A mention menu that displays user suggestions when typing the @ character in the editor.
+category: editor
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/EditorMentionMenu.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The EditorMentionMenu component displays a menu of user suggestions when typing the `@` character in the editor and inserts the selected mention using the `@tiptap/extension-mention` package.
+
+::note
+It uses the `useEditorMenu` composable built on top of TipTap's [Suggestion](https://tiptap.dev/docs/editor/api/utilities/suggestion) utility to filter items as you type and support keyboard navigation (arrow keys, enter to select, escape to close).
+::
+
+::caution
+It must be used inside an [Editor](/docs/components/editor) component's default slot to have access to the editor instance.
+::
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-mention-menu-example'
+class: 'p-8'
+---
+::
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/nodes/mention" target="_blank"}
+Learn more about the Mention extension in the TipTap documentation.
+::
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-mention-menu-items-example'
+class: 'p-8'
+---
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
+### Char
+
+Use the `char` prop to change the trigger character. Defaults to `@`{lang="ts-type"}.
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorMentionMenu :editor="editor" :items="channels" char="#" />
+  </UEditor>
+</template>
+```
+
+### Options
+
+Use the `options` prop to customize the positioning behavior using [Floating UI options](https://floating-ui.com/docs/computeposition#options).
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorMentionMenu
+      :editor="editor"
+      :items="items"
+      :options="{
+        placement: 'bottom-start',
+        offset: 4
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+## API
+
+### Props
+
+:component-props
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/editor-suggestion-menu.md b/docs/content/docs/2.components/editor-suggestion-menu.md
new file mode 100644
index 0000000000..f011c71d19
--- /dev/null
+++ b/docs/content/docs/2.components/editor-suggestion-menu.md
@@ -0,0 +1,104 @@
+---
+title: EditorSuggestionMenu
+description: A command menu that displays formatting and action suggestions when typing the / character in the editor.
+category: editor
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/EditorSuggestionMenu.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The EditorSuggestionMenu component displays a menu of formatting and action suggestions when typing a trigger character in the editor and executes the corresponding [handler](/docs/components/editor#handlers) when an item is selected.
+
+::note
+It uses the `useEditorMenu` composable built on top of TipTap's [Suggestion](https://tiptap.dev/docs/editor/api/utilities/suggestion) utility to filter items as you type and support keyboard navigation (arrow keys, enter to select, escape to close).
+::
+
+::caution
+It must be used inside an [Editor](/docs/components/editor) component's default slot to have access to the editor instance.
+::
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-suggestion-menu-example'
+class: 'p-8'
+---
+::
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- [`kind?: "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}](/docs/components/editor#handlers)
+- `label?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `type?: "label" | "separator"`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-suggestion-menu-items-example'
+class: 'p-8'
+---
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
+::tip
+Use `type: 'label'` for section headers and `type: 'separator'` for visual dividers to organize commands into logical groups for better discoverability.
+::
+
+### Char
+
+Use the `char` prop to change the trigger character. Defaults to `/`{lang="ts-type"}.
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorSuggestionMenu :editor="editor" :items="items" char=">" />
+  </UEditor>
+</template>
+```
+
+### Options
+
+Use the `options` prop to customize the positioning behavior using [Floating UI options](https://floating-ui.com/docs/computeposition#options).
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorSuggestionMenu
+      :editor="editor"
+      :items="items"
+      :options="{
+        placement: 'bottom-start',
+        offset: 4
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+## API
+
+### Props
+
+:component-props
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/editor-toolbar.md b/docs/content/docs/2.components/editor-toolbar.md
new file mode 100644
index 0000000000..36762e6e38
--- /dev/null
+++ b/docs/content/docs/2.components/editor-toolbar.md
@@ -0,0 +1,197 @@
+---
+title: EditorToolbar
+description: A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
+category: editor
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/EditorToolbar.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The EditorToolbar component displays a toolbar of formatting buttons that automatically sync their active state with the editor content. It supports three layout modes using the `@tiptap/vue-3/menus` package:
+- `fixed`{lang="ts-type"} (always visible)
+- `bubble`{lang="ts-type"} (appears on text selection)
+- `floating`{lang="ts-type"} (appears on empty lines)
+
+::caution
+It must be used inside an [Editor](/docs/components/editor) component's default slot to have access to the editor instance.
+::
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-toolbar-example'
+class: 'p-8'
+---
+::
+
+::callout{icon="i-custom-tiptap"}
+The bubble and floating layouts use TipTap's [BubbleMenu](https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu) and [FloatingMenu](https://tiptap.dev/docs/editor/extensions/functionality/floating-menu) extensions.
+::
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
+- `activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
+- `variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
+- `activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
+- `size?: "xs" | "sm" | "md" | "lg" | "xl"`{lang="ts-type"}
+- [`kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}](/docs/components/editor#handlers)
+- `disabled?: boolean`{lang="ts-type"}
+- `loading?: boolean`{lang="ts-type"}
+- `active?: boolean`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-link-popover)
+- `onClick?: (e: MouseEvent) => void`{lang="ts-type"}
+- `items?: EditorToolbarItem[] | EditorToolbarItem[][]`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+
+You can pass any property from the [Button](/docs/components/button#props) component such as `color`, `variant`, `size`, etc.
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-toolbar-items-example'
+class: 'p-8'
+---
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
+::tip
+Each item can take an `items` array of objects with the same properties as the `items` prop to create a [DropdownMenu](/docs/components/dropdown-menu).
+::
+
+### Layout
+
+Use the `layout` prop to change how the toolbar is displayed. Defaults to `fixed`{lang="ts-type"}.
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-toolbar-layout-example'
+class: 'p-8'
+options:
+  - name: layout
+    label: Layout
+    default: bubble
+    items:
+      - fixed
+      - bubble
+      - floating
+---
+::
+
+### Options
+
+When using `bubble`{lang="ts-type"} or `floating`{lang="ts-type"} layouts, use the `options` prop to customize the positioning behavior using [Floating UI options](https://floating-ui.com/docs/computeposition#options).
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorToolbar
+      :editor="editor"
+      :items="items"
+      layout="bubble"
+      :options="{
+        placement: 'top',
+        offset: 8,
+        flip: { padding: 8 },
+        shift: { padding: 8 }
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+### Should Show
+
+When using `bubble`{lang="ts-type"} or `floating`{lang="ts-type"} layouts, use the `should-show` prop to control when the toolbar appears. This function receives context about the editor state and returns a boolean.
+
+```vue
+<template>
+  <UEditor v-slot="{ editor }">
+    <UEditorToolbar
+      :editor="editor"
+      :items="items"
+      layout="bubble"
+      :should-show="({ view, state }) => {
+        const { selection } = state
+        const { from, to } = selection
+        const text = state.doc.textBetween(from, to)
+        return view.hasFocus() && !selection.empty && text.length > 10
+      }"
+    />
+  </UEditor>
+</template>
+```
+
+## Examples
+
+### With image toolbar
+
+Use the `should-show` prop to create context-specific toolbars that appear only for certain node types. This example shows a `bubble` toolbar with download and delete actions that only appears when an image is selected.
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-toolbar-image-example'
+class: 'p-8'
+---
+::
+
+### With link popover
+
+This example demonstrates how to create a custom link popover using the `slot` property on toolbar items and the [Popover](/docs/components/popover) component.
+
+1. Create a Vue component that wraps a [Popover](/docs/components/popover) with link editing functionality:
+
+::component-example
+---
+preview: false
+collapse: true
+name: 'editor-link-popover'
+---
+::
+
+2. Use the custom component in the toolbar with a named slot:
+
+::component-example
+---
+elevated: true
+collapse: true
+name: 'editor-toolbar-custom-slot-example'
+class: 'p-8'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/editor.md b/docs/content/docs/2.components/editor.md
new file mode 100644
index 0000000000..6e631bdb40
--- /dev/null
+++ b/docs/content/docs/2.components/editor.md
@@ -0,0 +1,477 @@
+---
+title: Editor
+description: A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
+category: editor
+links:
+  - label: TipTap
+    icon: i-custom-tiptap
+    to: https://tiptap.dev/
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Editor.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The Editor component provides a powerful rich text editing experience built on [TipTap](https://tiptap.dev/). It supports multiple content formats (JSON, HTML, Markdown), customizable toolbars, drag-and-drop block reordering, slash commands, mentions, emoji picker, and extensible architecture for adding custom functionality.
+
+::component-example
+---
+source: false
+elevated: true
+name: 'editor-example'
+class: 'relative h-176 overflow-y-auto !p-0 rounded-b-md'
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v4/docs/app/components/content/examples/editor/EditorExample.vue" aria-label="View source code"}
+This example demonstrates a production-ready Editor component. Check out the source code on GitHub.
+::
+
+### Content
+
+Use the `v-model` directive to control the value of the Editor.
+
+::component-code
+---
+elevated: true
+prettier: true
+collapse: true
+ignore:
+  - modelValue.type
+  - modelValue.content
+  - class
+external:
+  - modelValue
+class: 'p-8'
+props:
+  modelValue:
+    type: 'doc'
+    content:
+      - type: 'heading'
+        attrs:
+          level: 1
+        content:
+          - type: 'text'
+            text: 'Hello World'
+      - type: 'paragraph'
+        content:
+          - type: 'text'
+            text: 'This is a '
+          - type: 'text'
+            marks:
+              - type: 'bold'
+            text: 'rich text'
+          - type: 'text'
+            text: ' editor.'
+  class: 'w-full min-h-21'
+---
+::
+
+### Content Type
+
+The Editor automatically detects the content format based on `v-model` type: strings are treated as `html`{lang="ts-type"} and objects as `json`{lang="ts-type"}.
+
+You can explicitly set the format using the `content-type` prop: `json`{lang="ts-type"}, `html`{lang="ts-type"}, or `markdown`{lang="ts-type"}.
+
+::component-code
+---
+elevated: true
+prettier: true
+ignore:
+  - modelValue
+  - contentType
+  - class
+external:
+  - modelValue
+class: 'p-8'
+props:
+  modelValue: |
+    <h1>Hello World</h1>
+    <p>This is a <strong>rich text</strong> editor.</p>
+  contentType: 'html'
+  class: 'w-full min-h-21'
+---
+::
+
+### Extensions
+
+The Editor includes the following extensions by default:
+
+- [**StarterKit**](#starter-kit) - Core editing features (bold, italic, headings, lists, etc.)
+- [**Placeholder**](#placeholder) - Show placeholder text (when placeholder prop is provided)
+- **Image** - Insert and display images
+- **Mention** - Add @ mentions support
+- **Markdown** - Parse and serialize markdown (when content type is markdown)
+
+::note
+Each built-in extension can be configured using its corresponding prop (`starter-kit`, `placeholder`, `image`, `mention`, `markdown`) to customize its behavior with TipTap options.
+::
+
+You can use the `extensions` prop to add additional TipTap extensions to enhance the Editor's capabilities:
+
+```vue
+<script setup lang="ts">
+import { Emoji } from '@tiptap/extension-emoji'
+import TextAlign from '@tiptap/extension-text-align'
+
+const value = ref('<h1>Hello World</h1>\n')
+</script>
+
+<template>
+  <UEditor
+    v-model="value"
+    :extensions="[
+      Emoji,
+      TextAlign.configure({
+        types: ['heading', 'paragraph']
+      })
+    ]"
+  />
+</template>
+```
+
+::tip{to="#with-image-upload"}
+Check out the image upload example for creating custom TipTap extensions.
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text that shows in empty paragraphs.
+
+::component-code
+---
+elevated: true
+prettier: true
+ignore:
+  - modelValue
+  - contentType
+  - placeholder
+  - class
+external:
+  - modelValue
+class: 'p-8'
+props:
+  modelValue: |
+    <h1>Hello World</h1>
+    <p></p>
+  placeholder: 'Start writing...'
+  class: 'w-full min-h-21'
+---
+::
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/functionality/placeholder" target="_blank"}
+Learn more about Placeholder extension in the TipTap documentation.
+::
+
+### Starter Kit
+
+Use the `starter-kit` prop to configure the built-in TipTap StarterKit extension which includes common editor features like bold, italic, headings, lists, blockquotes, code blocks, and more.
+
+```vue
+<script setup lang="ts">
+const value = ref('<h1>Hello World</h1>\n')
+</script>
+
+<template>
+  <UEditor
+    v-model="value"
+    :starter-kit="{
+      blockquote: false,
+      headings: {
+        levels: [1, 2, 3, 4]
+      },
+      dropcursor: {
+        color: 'var(--ui-primary)',
+        width: 2
+      },
+      link: {
+        openOnClick: false
+      }
+    }"
+  />
+</template>
+```
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/functionality/starterkit" target="_blank"}
+Learn more about StarterKit extension in the TipTap documentation.
+::
+
+### Handlers
+
+Handlers wrap TipTap's built-in commands to provide a unified interface for editor actions. When you add a `kind` property to a [EditorToolbar](/docs/components/editor-toolbar) or [EditorSuggestionMenu](/docs/components/editor-suggestion-menu) item, the corresponding handler executes the TipTap command and manages its state (active, disabled, etc.).
+
+#### Default handlers
+
+The Editor component provides these default handlers, which you can reference in toolbar or suggestion menu items using the `kind` property:
+
+| Handler | Description | Usage |
+|---------|-------------|-------|
+| `mark`{lang="ts-type"} | Toggle text marks (bold, italic, strike, code, underline) | Requires `mark` property in item |
+| `textAlign`{lang="ts-type"} | Set text alignment (left, center, right, justify) | Requires `align` property in item |
+| `heading`{lang="ts-type"} | Toggle heading levels (1-6) | Requires `level` property in item |
+| `link`{lang="ts-type"} | Add, edit, or remove links | Prompts for URL if not provided |
+| `image`{lang="ts-type"} | Insert images | Prompts for URL if not provided |
+| `blockquote`{lang="ts-type"} | Toggle blockquotes | |
+| `bulletList`{lang="ts-type"} | Toggle bullet lists | Handles list conversions |
+| `orderedList`{lang="ts-type"} | Toggle ordered lists | Handles list conversions |
+| `codeBlock`{lang="ts-type"} | Toggle code blocks | |
+| `horizontalRule`{lang="ts-type"} | Insert horizontal rules | |
+| `paragraph`{lang="ts-type"} | Set paragraph format | |
+| `undo`{lang="ts-type"} | Undo last change | |
+| `redo`{lang="ts-type"} | Redo last undone change | |
+| `clearFormatting`{lang="ts-type"} | Remove all formatting | Works with selection or position |
+| `duplicate`{lang="ts-type"} | Duplicate a node | Requires `pos` property in item |
+| `delete`{lang="ts-type"} | Delete a node | Requires `pos` property in item |
+| `moveUp`{lang="ts-type"} | Move a node up | Requires `pos` property in item |
+| `moveDown`{lang="ts-type"} | Move a node down | Requires `pos` property in item |
+| `suggestion`{lang="ts-type"} | Trigger suggestion menu | Inserts `/` character |
+| `mention`{lang="ts-type"} | Trigger mention menu | Inserts `@` character |
+| `emoji`{lang="ts-type"} | Trigger emoji picker | Inserts `:` character |
+
+Here's how to use default handlers in toolbar or suggestion menu items:
+
+```vue
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+
+const value = ref('<h1>Hello World</h1>\n')
+
+const items: EditorToolbarItem[] = [
+  { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
+  { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
+  { kind: 'heading', level: 1, icon: 'i-lucide-heading-1' },
+  { kind: 'heading', level: 2, icon: 'i-lucide-heading-2' },
+  { kind: 'textAlign', align: 'left', icon: 'i-lucide-align-left' },
+  { kind: 'textAlign', align: 'center', icon: 'i-lucide-align-center' },
+  { kind: 'bulletList', icon: 'i-lucide-list' },
+  { kind: 'orderedList', icon: 'i-lucide-list-ordered' },
+  { kind: 'blockquote', icon: 'i-lucide-quote' },
+  { kind: 'link', icon: 'i-lucide-link' }
+]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="value">
+    <UEditorToolbar :editor="editor" :items="items" />
+  </UEditor>
+</template>
+```
+
+#### Custom handlers
+
+Use the `handlers` prop to extend or override the default handlers. Custom handlers are merged with the default handlers, allowing you to add new actions or modify existing behavior.
+
+Each handler implements the `EditorHandler`{lang="ts-type"} interface:
+
+```ts
+interface EditorHandler {
+  /* Checks if the command can be executed in the current editor state */
+  canExecute: (editor: Editor, item?: any) => boolean
+  /* Executes the command and returns a Tiptap chain */
+  execute: (editor: Editor, item?: any) => any
+  /* Determines if the item should appear active (used for toggle states) */
+  isActive: (editor: Editor, item?: any) => boolean
+  /* Optional additional check to disable the item (combined with `canExecute`) */
+  isDisabled?: (editor: Editor, item?: any) => boolean
+}
+```
+
+Here's an example of creating custom handlers:
+
+```vue
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
+import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui'
+
+const value = ref('<h1>Hello World</h1>\n')
+
+const customHandlers = {
+  highlight: {
+    canExecute: (editor: Editor) => editor.can().toggleHighlight(),
+    execute: (editor: Editor) => editor.chain().focus().toggleHighlight(),
+    isActive: (editor: Editor) => editor.isActive('highlight'),
+    isDisabled: (editor: Editor) => !editor.isEditable
+  }
+} satisfies EditorCustomHandlers
+
+const items = [
+  // Built-in handler
+  { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
+  // Custom handler
+  { kind: 'highlight', icon: 'i-lucide-highlighter' }
+] satisfies EditorToolbarItem<typeof customHandlers>[]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="value" :handlers="customHandlers">
+    <UEditorToolbar :editor="editor" :items="items" />
+  </UEditor>
+</template>
+```
+
+::tip{to="#with-image-upload"}
+Check out the image upload example for a complete implementation with custom handlers.
+::
+
+## Examples
+
+### With toolbar
+
+You can use the [EditorToolbar](/docs/components/editor-toolbar) component to add a fixed, bubble, or floating toolbar to the Editor with common formatting actions.
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-toolbar-example'
+class: 'p-8'
+---
+::
+
+### With drag handle
+
+You can use the [EditorDragHandle](/docs/components/editor-drag-handle) component to add a draggable handle for reordering blocks.
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-drag-handle-example'
+class: 'p-8'
+---
+::
+
+### With suggestion menu
+
+You can use the [EditorSuggestionMenu](/docs/components/editor-suggestion-menu) component to add slash commands for quick formatting and insertions.
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-suggestion-menu-example'
+class: 'p-8'
+---
+::
+
+### With mention menu
+
+You can use the [EditorMentionMenu](/docs/components/editor-mention-menu) component to add @ mentions for tagging users or entities.
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-mention-menu-example'
+class: 'p-8'
+---
+::
+
+### With emoji menu
+
+You can use the [EditorEmojiMenu](/docs/components/editor-emoji-menu) component to add emoji picker support.
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-emoji-menu-example'
+class: 'p-8'
+---
+::
+
+### With image upload
+
+This example demonstrates how to create an image upload feature using the `extensions` prop to register a custom TipTap node and the `handlers` prop to define how the toolbar button triggers the upload flow.
+
+1. Create a Vue component that uses the [FileUpload](/docs/components/file-upload) component:
+
+::component-example
+---
+preview: false
+collapse: true
+name: 'editor-image-upload-node'
+---
+::
+
+2. Create a custom TipTap extension to register the node:
+
+::component-example
+---
+preview: false
+collapse: true
+lang: 'ts'
+name: 'editor-image-upload'
+---
+::
+
+::warning
+If you encounter a `Adding different instances of a keyed plugin` error when creating a custom extension, you may need to add `prosemirror-state` to the vite `optimizeDeps` include list in your `nuxt.config.ts` file.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vite: {
+    optimizeDeps: {
+      include: ['prosemirror-state']
+    }
+  }
+})
+```
+::
+
+3. Use the custom extension in the Editor:
+
+::component-example
+---
+elevated: true
+collapse: true
+prettier: true
+name: 'editor-image-upload-example'
+class: '!p-0'
+---
+::
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/extensions/custom-extensions" target="_blank"}
+Learn more about creating custom extensions in the TipTap documentation.
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `editor`{lang="ts-type"} | `Ref<Editor \| undefined>`{lang="ts-type"} |
+
+::callout{icon="i-custom-tiptap" to="https://tiptap.dev/docs/editor/api/editor" target="_blank"}
+The exposed editor instance is the TipTap Editor API. Check the TipTap documentation for all available methods and properties.
+::
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/content/docs/2.components/input-menu.md b/docs/content/docs/2.components/input-menu.md
index df07f7d3ec..56b4f0a59f 100644
--- a/docs/content/docs/2.components/input-menu.md
+++ b/docs/content/docs/2.components/input-menu.md
@@ -782,7 +782,7 @@ name: 'input-menu-filter-fields-example'
 ---
 ::
 
-### With virtualization :badge{label="4.1+"}
+### With virtualization :badge{label="4.1+" class="align-text-top"}
 
 Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
 
diff --git a/docs/content/docs/2.components/modal.md b/docs/content/docs/2.components/modal.md
index 41f9056e5e..622b54fb84 100644
--- a/docs/content/docs/2.components/modal.md
+++ b/docs/content/docs/2.components/modal.md
@@ -294,7 +294,7 @@ slots:
 :placeholder{class="h-48"}
 ::
 
-### Scrollable :badge{label="4.2+"}
+### Scrollable :badge{label="4.2+" class="align-text-top"}
 
 Use the `scrollable` prop to make the Modal's content scrollable within the overlay.
 
diff --git a/docs/content/docs/2.components/select-menu.md b/docs/content/docs/2.components/select-menu.md
index 3dbf2c236a..379e59db21 100644
--- a/docs/content/docs/2.components/select-menu.md
+++ b/docs/content/docs/2.components/select-menu.md
@@ -821,7 +821,7 @@ name: 'select-menu-filter-fields-example'
 ---
 ::
 
-### With virtualization :badge{label="4.1+"}
+### With virtualization :badge{label="4.1+" class="align-text-top"}
 
 Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
 
diff --git a/docs/content/docs/2.components/table.md b/docs/content/docs/2.components/table.md
index 8fab5286b0..9305004591 100644
--- a/docs/content/docs/2.components/table.md
+++ b/docs/content/docs/2.components/table.md
@@ -596,7 +596,7 @@ class: '!p-0'
 ---
 ::
 
-### With virtualization :badge{label="4.1+"}
+### With virtualization :badge{label="4.1+" class="align-text-top"}
 
 Use the `virtualize` prop to enable virtualization for large datasets as a boolean or an object with options like `{ estimateSize: 65, overscan: 12 }`. You can also pass other [TanStack Virtual options](https://tanstack.com/virtual/latest/docs/api/virtualizer#optional-options) to customize the virtualization behavior.
 
diff --git a/docs/content/docs/2.components/toast.md b/docs/content/docs/2.components/toast.md
index a5917f30ae..9a741f4ae3 100644
--- a/docs/content/docs/2.components/toast.md
+++ b/docs/content/docs/2.components/toast.md
@@ -260,7 +260,7 @@ name: 'toast-example'
 In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
 ::
 
-### Change global max :badge{label="4.1+"}
+### Change global max :badge{label="4.1+" class="align-text-top"}
 
 Change the `toaster.max` prop on the [App](/docs/components/app#props) component to change the max number of toasts displayed at once.
 
diff --git a/docs/content/docs/2.components/tree.md b/docs/content/docs/2.components/tree.md
index 6a53d1bdc9..3c43c63baa 100644
--- a/docs/content/docs/2.components/tree.md
+++ b/docs/content/docs/2.components/tree.md
@@ -148,7 +148,7 @@ props:
 ---
 ::
 
-### Nested :badge{label="4.1+"}
+### Nested :badge{label="4.1+" class="align-text-top"}
 
 Use the `nested` prop to control whether the Tree is rendered with nested structure or as a flat list. Defaults to `true`.
 
@@ -501,7 +501,7 @@ props:
 This lets you select a parent item without expanding or collapsing its children.
 ::
 
-### With checkbox in items :badge{label="4.1+"}
+### With checkbox in items :badge{label="4.1+" class="align-text-top"}
 
 You can use the `item-leading` slot to add a [Checkbox](/docs/components/checkbox) to the items. Use the `multiple`, `propagate-select` and `bubble-select` props to enable multi-selection with parent-child relationship and the `select` and `toggle` events to control the selected and expanded state of the items.
 
@@ -518,7 +518,7 @@ props:
 This example uses the `as` prop to change the items from `button` to `div` as the [`Checkbox`](/docs/components/checkbox) is also rendered as a `button`.
 ::
 
-### With drag and drop :badge{label="4.1+"}
+### With drag and drop :badge{label="4.1+" class="align-text-top"}
 
 Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Tree. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
 
@@ -534,7 +534,7 @@ name: 'tree-drag-and-drop-example'
 This example sets the `nested` prop to `false` to have a flat list of items so that the items can be dragged and dropped.
 ::
 
-### With virtualization :badge{label="4.1+"}
+### With virtualization :badge{label="4.1+" class="align-text-top"}
 
 Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
 
diff --git a/docs/content/templates.yml b/docs/content/templates.yml
index bafaf6ff3d..0663da8658 100644
--- a/docs/content/templates.yml
+++ b/docs/content/templates.yml
@@ -5,6 +5,35 @@ hero:
   description: 'Explore ready-made templates powered by our Vue components. These templates are fully responsive, accessible, and easy to customize, so you can launch your project quickly and effortlessly.'
 navigation: false
 items:
+  - title: 'Editor'
+    description: "A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types."
+    icon: i-lucide-file-text
+    framework: nuxt
+    features:
+      - title: Slash commands
+        icon: i-lucide-square-slash
+      - title: Drag & drop blocks
+        icon: i-lucide-move
+      - title: Real-time collaboration
+        icon: i-lucide-users
+    deploy_links:
+      - label: Vercel
+        to: https://vercel.com/new/clone?repository-name=editor&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Feditor&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Feditor-dark.png&demo-url=https%3A%2F%2Feditor-template.nuxt.dev%2F&demo-title=Nuxt%20Editor%20Template&demo-description=A%20rich%20text%20editor%20template%20built%20with%20Nuxt%20UI%20and%20TipTap.&env=NUXT_PUBLIC_PARTYKIT_HOST&envDescription=PartyKit%20host%20URL%20for%20real-time%20collaboration%20(optional)&envLink=https%3A%2F%2Fdocs.partykit.io%2Fquickstart%2F
+        target: _blank
+        icon: i-simple-icons-vercel
+      - label: Netlify
+        to: https://app.netlify.com/start/deploy?repository=https://github.com/nuxt-ui-templates/editor
+        target: _blank
+        icon: i-simple-icons-netlify
+    links:
+      - label: Preview
+        to: https://editor-template.nuxt.dev
+        target: _blank
+        icon: i-lucide-link
+      - label: GitHub
+        to: https://github.com/nuxt-ui-templates/editor
+        target: _blank
+        icon: i-simple-icons-github
   - title: 'Changelog'
     description: "A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC."
     icon: i-lucide-newspaper
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 7ce0166e62..c65f766c6d 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -186,7 +186,7 @@ export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
       // prevents reloading page when navigating between components
-      include: ['@ai-sdk/vue', '@internationalized/date', '@nuxt/content/utils', '@tanstack/vue-table', '@vercel/analytics/nuxt', '@vercel/speed-insights/nuxt', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/integrations/useFuse', '@vueuse/shared', 'ai', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'json5', 'motion-v', 'ohash', 'ohash/utils', 'prettier', 'reka-ui', 'reka-ui/namespaced', 'scule', 'shiki', 'shiki-stream/vue', 'shiki-transformer-color-highlight', 'shiki/engine-javascript.mjs', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
+      include: ['@ai-sdk/vue', '@internationalized/date', '@nuxt/content/utils', '@tanstack/vue-table', '@tiptap/extension-emoji', '@tiptap/extension-text-align', '@tiptap/core', '@tiptap/extension-horizontal-rule', '@tiptap/extension-image', '@tiptap/extension-mention', '@tiptap/extension-placeholder', '@tiptap/markdown', '@tiptap/starter-kit', '@tiptap/vue-3', '@floating-ui/dom', '@tiptap/extension-drag-handle-vue-3', '@tiptap/vue-3/menus', '@tiptap/suggestion', '@tiptap/pm/state', '@vercel/analytics/nuxt', '@vercel/speed-insights/nuxt', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/integrations/useFuse', '@vueuse/shared', 'ai', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'json5', 'motion-v', 'ohash', 'ohash/utils', 'prettier', 'prosemirror-state', 'reka-ui', 'reka-ui/namespaced', 'scule', 'shiki', 'shiki-stream/vue', 'shiki-transformer-color-highlight', 'shiki/engine-javascript.mjs', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
     }
   },
 
@@ -197,6 +197,49 @@ export default defineNuxtConfig({
 
       return { component, code }
     }],
+    overrides: {
+      UEditor: {
+        props: {
+          modelValue: { name: 'modelValue', type: 'null | string | JSONContent | JSONContent[]' },
+          parseOptions: { name: 'parseOptions', type: 'ParseOptions' }
+        }
+      },
+      UEditorDragHandle: { props: { editor: { name: 'editor', type: 'Editor' } } },
+      UEditorToolbar: { props: { editor: { name: 'editor', type: 'Editor' } } },
+      UEditorSuggestionMenu: { props: { editor: { name: 'editor', type: 'Editor' } } },
+      UEditorMentionMenu: { props: { editor: { name: 'editor', type: 'Editor' } } },
+      UEditorEmojiMenu: { props: { editor: { name: 'editor', type: 'Editor' } } },
+      UCalendar: {
+        props: {
+          defaultValue: { name: 'defaultValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]' },
+          modelValue: { name: 'modelValue', type: 'null | CalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]' },
+          defaultPlaceholder: { name: 'defaultPlaceholder', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          placeholder: { name: 'placeholder', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          maxValue: { name: 'maxValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          minValue: { name: 'minValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' }
+        }
+      },
+      UInputDate: {
+        props: {
+          defaultValue: { name: 'defaultValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime | DateRange' },
+          modelValue: { name: 'modelValue', type: 'null | CalendarDate | CalendarDateTime | ZonedDateTime | DateRange' },
+          defaultPlaceholder: { name: 'defaultPlaceholder', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          placeholder: { name: 'placeholder', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          maxValue: { name: 'maxValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' },
+          minValue: { name: 'minValue', type: 'CalendarDate | CalendarDateTime | ZonedDateTime' }
+        }
+      },
+      UInputTime: {
+        props: {
+          defaultValue: { name: 'defaultValue', type: 'Time | CalendarDateTime | ZonedDateTime' },
+          modelValue: { name: 'modelValue', type: 'null | Time | CalendarDateTime | ZonedDateTime' },
+          defaultPlaceholder: { name: 'defaultPlaceholder', type: 'Time | CalendarDateTime | ZonedDateTime' },
+          placeholder: { name: 'placeholder', type: 'Time | CalendarDateTime | ZonedDateTime' },
+          maxValue: { name: 'maxValue', type: 'Time | CalendarDateTime | ZonedDateTime' },
+          minValue: { name: 'minValue', type: 'Time | CalendarDateTime | ZonedDateTime' }
+        }
+      }
+    },
     exclude: [
       '@nuxt/content',
       '@nuxt/icon',
diff --git a/docs/package.json b/docs/package.json
index 3cc2ee2fd0..b354f36088 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,6 +22,8 @@
     "@nuxt/ui": "workspace:*",
     "@nuxtjs/mcp-toolkit": "^0.4.1",
     "@nuxtjs/plausible": "^2.0.1",
+    "@tiptap/extension-emoji": "3.12.0",
+    "@tiptap/extension-text-align": "3.12.0",
     "@octokit/rest": "^22.0.1",
     "@regle/core": "^1.11.0",
     "@regle/rules": "^1.11.0",
diff --git a/docs/public/assets/templates/nuxt/editor-dark.png b/docs/public/assets/templates/nuxt/editor-dark.png
new file mode 100644
index 0000000000..1f0a310444
Binary files /dev/null and b/docs/public/assets/templates/nuxt/editor-dark.png differ
diff --git a/docs/public/assets/templates/nuxt/editor-light.png b/docs/public/assets/templates/nuxt/editor-light.png
new file mode 100644
index 0000000000..cdf964f9df
Binary files /dev/null and b/docs/public/assets/templates/nuxt/editor-light.png differ
diff --git a/docs/public/components/dark/editor-drag-handle.png b/docs/public/components/dark/editor-drag-handle.png
new file mode 100644
index 0000000000..4b7ab79253
Binary files /dev/null and b/docs/public/components/dark/editor-drag-handle.png differ
diff --git a/docs/public/components/dark/editor-emoji-menu.png b/docs/public/components/dark/editor-emoji-menu.png
new file mode 100644
index 0000000000..5337ee1b4a
Binary files /dev/null and b/docs/public/components/dark/editor-emoji-menu.png differ
diff --git a/docs/public/components/dark/editor-mention-menu.png b/docs/public/components/dark/editor-mention-menu.png
new file mode 100644
index 0000000000..7897a498fc
Binary files /dev/null and b/docs/public/components/dark/editor-mention-menu.png differ
diff --git a/docs/public/components/dark/editor-suggestion-menu.png b/docs/public/components/dark/editor-suggestion-menu.png
new file mode 100644
index 0000000000..a9e7ed05d1
Binary files /dev/null and b/docs/public/components/dark/editor-suggestion-menu.png differ
diff --git a/docs/public/components/dark/editor-toolbar.png b/docs/public/components/dark/editor-toolbar.png
new file mode 100644
index 0000000000..3824ef8887
Binary files /dev/null and b/docs/public/components/dark/editor-toolbar.png differ
diff --git a/docs/public/components/dark/editor.png b/docs/public/components/dark/editor.png
new file mode 100644
index 0000000000..d14ca54e4e
Binary files /dev/null and b/docs/public/components/dark/editor.png differ
diff --git a/docs/public/components/light/editor-drag-handle.png b/docs/public/components/light/editor-drag-handle.png
new file mode 100644
index 0000000000..4662206558
Binary files /dev/null and b/docs/public/components/light/editor-drag-handle.png differ
diff --git a/docs/public/components/light/editor-emoji-menu.png b/docs/public/components/light/editor-emoji-menu.png
new file mode 100644
index 0000000000..8a1cb8fde6
Binary files /dev/null and b/docs/public/components/light/editor-emoji-menu.png differ
diff --git a/docs/public/components/light/editor-mention-menu.png b/docs/public/components/light/editor-mention-menu.png
new file mode 100644
index 0000000000..3ff1dec58d
Binary files /dev/null and b/docs/public/components/light/editor-mention-menu.png differ
diff --git a/docs/public/components/light/editor-suggestion-menu.png b/docs/public/components/light/editor-suggestion-menu.png
new file mode 100644
index 0000000000..f150c111fa
Binary files /dev/null and b/docs/public/components/light/editor-suggestion-menu.png differ
diff --git a/docs/public/components/light/editor-toolbar.png b/docs/public/components/light/editor-toolbar.png
new file mode 100644
index 0000000000..5a7b02d6a3
Binary files /dev/null and b/docs/public/components/light/editor-toolbar.png differ
diff --git a/docs/public/components/light/editor.png b/docs/public/components/light/editor.png
new file mode 100644
index 0000000000..b6b1f76d0d
Binary files /dev/null and b/docs/public/components/light/editor.png differ
diff --git a/docs/public/placeholder.jpeg b/docs/public/placeholder.jpeg
new file mode 100644
index 0000000000..b86d40b552
Binary files /dev/null and b/docs/public/placeholder.jpeg differ
diff --git a/package.json b/package.json
index 38e8213bde..8632aaa466 100644
--- a/package.json
+++ b/package.json
@@ -133,6 +133,19 @@
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/vue-table": "^8.21.3",
     "@tanstack/vue-virtual": "^3.13.12",
+    "@tiptap/core": "3.12.0",
+    "@tiptap/extension-bubble-menu": "3.12.0",
+    "@tiptap/extension-drag-handle-vue-3": "3.12.0",
+    "@tiptap/extension-floating-menu": "3.12.0",
+    "@tiptap/extension-horizontal-rule": "3.12.0",
+    "@tiptap/extension-image": "3.12.0",
+    "@tiptap/extension-mention": "3.12.0",
+    "@tiptap/extension-placeholder": "3.12.0",
+    "@tiptap/markdown": "3.12.0",
+    "@tiptap/pm": "3.12.0",
+    "@tiptap/starter-kit": "3.12.0",
+    "@tiptap/suggestion": "3.12.0",
+    "@tiptap/vue-3": "3.12.0",
     "@unhead/vue": "^2.0.19",
     "@vueuse/core": "^14.1.0",
     "@vueuse/integrations": "^14.1.0",
diff --git a/playgrounds/nuxt/app/components/Navbar.vue b/playgrounds/nuxt/app/components/Navbar.vue
index 6c5c8134ee..14b8882d71 100644
--- a/playgrounds/nuxt/app/components/Navbar.vue
+++ b/playgrounds/nuxt/app/components/Navbar.vue
@@ -27,7 +27,14 @@ defineShortcuts({
 </script>
 
 <template>
-  <UDashboardNavbar :title="title" class="absolute top-0 inset-x-0 z-5 bg-default">
+  <UDashboardNavbar
+    :title="title"
+    :ui="{
+      left: 'shrink-0',
+      right: 'shrink overflow-x-auto py-2'
+    }"
+    class="absolute top-0 inset-x-0 z-5 bg-default"
+  >
     <template #toggle>
       <UDashboardSidebarToggle size="sm" variant="outline" class="ring-default" />
       <UDashboardSidebarCollapse size="sm" variant="outline" class="ring-default" />
diff --git a/playgrounds/nuxt/app/components/editor/EditorLinkPopover.vue b/playgrounds/nuxt/app/components/editor/EditorLinkPopover.vue
new file mode 100644
index 0000000000..17d4cc5cb6
--- /dev/null
+++ b/playgrounds/nuxt/app/components/editor/EditorLinkPopover.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+const props = defineProps<{
+  editor: any
+  autoOpen?: boolean
+}>()
+
+const open = ref(false)
+const url = ref('')
+
+const active = computed(() => props.editor.isActive('link'))
+const disabled = computed(() => {
+  if (!props.editor.isEditable) return true
+  const { selection } = props.editor.state
+  return selection.empty && !props.editor.isActive('link')
+})
+
+watch(() => props.editor, (editor, _, onCleanup) => {
+  if (!editor) return
+
+  const updateUrl = () => {
+    const { href } = editor.getAttributes('link')
+    url.value = href || ''
+  }
+
+  updateUrl()
+  editor.on('selectionUpdate', updateUrl)
+
+  onCleanup(() => {
+    editor.off('selectionUpdate', updateUrl)
+  })
+}, { immediate: true })
+
+watch(active, (isActive) => {
+  if (isActive && props.autoOpen) {
+    open.value = true
+  }
+})
+
+function setLink() {
+  if (!url.value) return
+
+  const { selection } = props.editor.state
+  const isEmpty = selection.empty
+
+  let chain = props.editor.chain().focus()
+  chain = chain.extendMarkRange('link').setLink({ href: url.value })
+
+  if (isEmpty) {
+    chain = chain.insertContent({ type: 'text', text: url.value })
+  }
+
+  chain.run()
+  open.value = false
+}
+
+function removeLink() {
+  props.editor
+    .chain()
+    .focus()
+    .extendMarkRange('link')
+    .unsetLink()
+    .setMeta('preventAutolink', true)
+    .run()
+
+  url.value = ''
+  open.value = false
+}
+
+function openLink() {
+  if (!url.value) return
+  window.open(url.value, '_blank', 'noopener,noreferrer')
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    setLink()
+  }
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open" :ui="{ content: 'p-0.5' }">
+    <UTooltip text="Link">
+      <UButton
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </UTooltip>
+
+    <template #content>
+      <UInput
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="flex items-center mr-0.5">
+          <UButton
+            icon="i-lucide-corner-down-left"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Apply link"
+            @click="setLink"
+          />
+
+          <USeparator orientation="vertical" class="h-6 mx-1" />
+
+          <UButton
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Open in new window"
+            @click="openLink"
+          />
+
+          <UButton
+            icon="i-lucide-trash"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Remove link"
+            @click="removeLink"
+          />
+        </div>
+      </UInput>
+    </template>
+  </UPopover>
+</template>
diff --git a/playgrounds/nuxt/app/components/editor/ImageUpload.ts b/playgrounds/nuxt/app/components/editor/ImageUpload.ts
new file mode 100644
index 0000000000..19968d02d3
--- /dev/null
+++ b/playgrounds/nuxt/app/components/editor/ImageUpload.ts
@@ -0,0 +1,40 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import type { NodeViewRenderer } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ImageUploadNodeComponent from './ImageUploadNode.vue'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      insertImageUpload: () => ReturnType
+    }
+  }
+}
+
+export default Node.create({
+  name: 'imageUpload',
+  group: 'block',
+  atom: true,
+  draggable: true,
+  addAttributes() {
+    return {}
+  },
+  parseHTML() {
+    return [{
+      tag: 'div[data-type="image-upload"]'
+    }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload' })]
+  },
+  addNodeView(): NodeViewRenderer {
+    return VueNodeViewRenderer(ImageUploadNodeComponent)
+  },
+  addCommands() {
+    return {
+      insertImageUpload: () => ({ commands }) => {
+        return commands.insertContent({ type: this.name })
+      }
+    }
+  }
+})
diff --git a/playgrounds/nuxt/app/components/editor/ImageUploadNode.vue b/playgrounds/nuxt/app/components/editor/ImageUploadNode.vue
new file mode 100644
index 0000000000..253a1731e3
--- /dev/null
+++ b/playgrounds/nuxt/app/components/editor/ImageUploadNode.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { NodeViewProps } from '@tiptap/vue-3'
+import { NodeViewWrapper } from '@tiptap/vue-3'
+
+const props = defineProps<NodeViewProps>()
+
+const file = ref<File | null>(null)
+const loading = ref(false)
+
+watch(file, async (newFile) => {
+  if (!newFile) return
+
+  loading.value = true
+
+  const reader = new FileReader()
+  reader.onload = async (e) => {
+    const dataUrl = e.target?.result as string
+    if (!dataUrl) {
+      loading.value = false
+      return
+    }
+
+    // Simulate upload delay
+    await new Promise(resolve => setTimeout(resolve, 2000))
+
+    const pos = props.getPos()
+    if (typeof pos !== 'number') {
+      loading.value = false
+      return
+    }
+
+    props.editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + 1 })
+      .setImage({ src: dataUrl })
+      .run()
+
+    loading.value = false
+  }
+  reader.readAsDataURL(newFile)
+})
+</script>
+
+<template>
+  <NodeViewWrapper>
+    <UFileUpload
+      v-model="file"
+      accept="image/*"
+      label="Upload an image"
+      description="SVG, PNG, JPG or GIF (max. 2MB)"
+      :preview="false"
+      class="min-h-48"
+    >
+      <template #leading>
+        <UAvatar
+          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
+          size="xl"
+          :class="[loading && 'animate-spin']"
+        />
+      </template>
+    </UFileUpload>
+  </NodeViewWrapper>
+</template>
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index 5398023167..5e7be2ca5f 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -27,6 +27,7 @@ const components = [
   'context-menu',
   'drawer',
   'dropdown-menu',
+  'editor',
   'empty',
   'error',
   'field-group',
diff --git a/playgrounds/nuxt/app/pages/components/editor.vue b/playgrounds/nuxt/app/pages/components/editor.vue
new file mode 100644
index 0000000000..93c7879558
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/editor.vue
@@ -0,0 +1,496 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import type { EditorToolbarItem, EditorMentionMenuItem, EditorEmojiMenuItem, DropdownMenuItem, EditorSuggestionMenuItem, EditorCustomHandlers } from '@nuxt/ui'
+import type { JSONContent } from '@tiptap/vue-3'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+import TextAlign from '@tiptap/extension-text-align'
+import ImageUpload from '../../components/editor/ImageUpload'
+
+const content = ref(`# Nuxt UI: A Modern UI Library
+
+Welcome to **Nuxt UI**, a comprehensive UI library for *Nuxt 3* applications.
+Built with [Tailwind CSS](https://tailwindcss.com) and [Reka UI](https://reka-ui.com), it provides a complete set of components for building beautiful interfaces.
+
+![Image](https://ui.nuxt.com/placeholder.jpeg)
+
+## Key Features
+
+Nuxt UI combines the best of modern web development
+
+- **Fully typed** with TypeScript support
+- *Customizable* theme system with semantic colors
+- <u>Accessible</u> components following ARIA guidelines
+- Built on top of \`Reka UI\` primitives
+- Support for ~~legacy browsers~~ modern standards
+
+### Getting Started
+
+Install Nuxt UI in your project with the following command:
+
+\`\`\`
+npx nuxi@latest module add ui
+\`\`\`
+
+> *Nuxt UI is designed to be intuitive and easy to use, whether you're building a simple landing page or a complex application.*
+
+### Component Categories
+
+1. Layout components (Container, Card, Accordion)
+2. Form components (Input, Select, Checkbox)
+3. Navigation (Navbar, Sidebar, Breadcrumb)
+4. Feedback (Alert, Toast, Modal)
+
+#### Code Example
+
+Here's a simple example using the \`Button\` component:
+
+\`\`\`
+<template>
+  <UButton color="primary">
+    Click me
+  </UButton>
+</template>
+\`\`\`
+
+---
+
+## Advanced Features
+
+Powerful capabilities for modern applications
+
+- Dark mode support out of the box
+- Keyboard shortcuts for improved accessibility
+- Nested lists support:
+  - With multiple levels
+  - And proper spacing
+
+Whether you're working on a personal project or building an enterprise application, Nuxt UI provides all the tools you need to create stunning user interfaces quickly and efficiently. The library is constantly evolving with new components and improvements based on community feedback.
+
+Visit our [documentation](https://ui.nuxt.com) to learn more and explore all available components.
+`)
+
+const customHandlers = {
+  imageUpload: {
+    canExecute: (editor: any) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor: any) => editor.chain().focus().insertContent({ type: 'imageUpload' }),
+    isActive: (editor: any) => editor.isActive('imageUpload'),
+    isDisabled: undefined
+  }
+} satisfies EditorCustomHandlers
+
+const toolbarItems = [[{
+  kind: 'undo',
+  icon: 'i-lucide-undo',
+  tooltip: { text: 'Undo' }
+}, {
+  kind: 'redo',
+  icon: 'i-lucide-redo',
+  tooltip: { text: 'Redo' }
+}], [{
+  kind: 'suggestion',
+  icon: 'i-lucide-square-slash'
+}, {
+  kind: 'mention',
+  icon: 'i-lucide-at-sign'
+}, {
+  kind: 'emoji',
+  icon: 'i-lucide-smile-plus'
+}], [{
+  icon: 'i-lucide-heading',
+  tooltip: { text: 'Headings' },
+  items: [{
+    kind: 'heading',
+    level: 1,
+    icon: 'i-lucide-heading-1',
+    label: 'Heading 1'
+  }, {
+    kind: 'heading',
+    level: 2,
+    icon: 'i-lucide-heading-2',
+    label: 'Heading 2'
+  }, {
+    kind: 'heading',
+    level: 3,
+    icon: 'i-lucide-heading-3',
+    label: 'Heading 3'
+  }, {
+    kind: 'heading',
+    level: 4,
+    icon: 'i-lucide-heading-4',
+    label: 'Heading 4'
+  }]
+}, {
+  icon: 'i-lucide-list',
+  tooltip: { text: 'Lists' },
+  items: [{
+    kind: 'bulletList',
+    icon: 'i-lucide-list',
+    label: 'Bullet List'
+  }, {
+    kind: 'orderedList',
+    icon: 'i-lucide-list-ordered',
+    label: 'Ordered List'
+  }]
+}, {
+  kind: 'blockquote',
+  icon: 'i-lucide-text-quote',
+  tooltip: { text: 'Blockquote' }
+}, {
+  kind: 'codeBlock',
+  icon: 'i-lucide-square-code',
+  tooltip: { text: 'Code Block' }
+}, {
+  kind: 'horizontalRule',
+  icon: 'i-lucide-separator-horizontal',
+  tooltip: { text: 'Horizontal Rule' }
+}, {
+  kind: 'paragraph',
+  icon: 'i-lucide-type',
+  tooltip: { text: 'Paragraph' }
+}], [{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold',
+  tooltip: { text: 'Bold' }
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic',
+  tooltip: { text: 'Italic' }
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline',
+  tooltip: { text: 'Underline' }
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough',
+  tooltip: { text: 'Strikethrough' }
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code',
+  tooltip: { text: 'Code' }
+}], [{
+  slot: 'link' as const,
+  icon: 'i-lucide-link'
+}, {
+  kind: 'imageUpload',
+  icon: 'i-lucide-image',
+  tooltip: { text: 'Image' }
+}], [{
+  kind: 'textAlign',
+  align: 'left',
+  icon: 'i-lucide-align-left',
+  tooltip: { text: 'Align Left' }
+}, {
+  kind: 'textAlign',
+  align: 'center',
+  icon: 'i-lucide-align-center',
+  tooltip: { text: 'Align Center' }
+}, {
+  kind: 'textAlign',
+  align: 'right',
+  icon: 'i-lucide-align-right',
+  tooltip: { text: 'Align Right' }
+}, {
+  kind: 'textAlign',
+  align: 'justify',
+  icon: 'i-lucide-align-justify',
+  tooltip: { text: 'Align Justify' }
+}]] satisfies EditorToolbarItem<typeof customHandlers>[][]
+
+const imageToolbarItems = (editor: any): EditorToolbarItem<typeof customHandlers>[][] => {
+  const node = editor.state.doc.nodeAt(editor.state.selection.from)
+
+  return [[{
+    icon: 'i-lucide-download',
+    to: node?.attrs?.src,
+    download: true,
+    tooltip: { text: 'Download' }
+  }, {
+    icon: 'i-lucide-refresh-cw',
+    tooltip: { text: 'Replace' },
+    onClick: () => {
+      const { state } = editor
+      const { selection } = state
+
+      const pos = selection.from
+      const node = state.doc.nodeAt(pos)
+
+      if (node && node.type.name === 'image') {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).insertContentAt(pos, { type: 'imageUpload' }).run()
+      }
+    }
+  }], [{
+    icon: 'i-lucide-trash',
+    tooltip: { text: 'Delete' },
+    onClick: () => {
+      const { state } = editor
+      const { selection } = state
+
+      const pos = selection.from
+      const node = state.doc.nodeAt(pos)
+
+      if (node && node.type.name === 'image') {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run()
+      }
+    }
+  }]]
+}
+
+const selectedNode = ref<{ node: JSONContent, pos: number }>()
+
+const handleItems = (editor: any): DropdownMenuItem[][] => {
+  if (!selectedNode.value?.node?.type) {
+    return []
+  }
+
+  return mapEditorItems(editor, [[
+    {
+      type: 'label',
+      label: upperFirst(selectedNode.value.node.type)
+    },
+    {
+      label: 'Turn into',
+      icon: 'i-lucide-repeat-2',
+      children: [
+        { kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' },
+        { kind: 'heading', level: 1, label: 'Heading 1', icon: 'i-lucide-heading-1' },
+        { kind: 'heading', level: 2, label: 'Heading 2', icon: 'i-lucide-heading-2' },
+        { kind: 'heading', level: 3, label: 'Heading 3', icon: 'i-lucide-heading-3' },
+        { kind: 'heading', level: 4, label: 'Heading 4', icon: 'i-lucide-heading-4' },
+        { kind: 'bulletList', label: 'Bullet List', icon: 'i-lucide-list' },
+        { kind: 'orderedList', label: 'Ordered List', icon: 'i-lucide-list-ordered' },
+        { kind: 'blockquote', label: 'Blockquote', icon: 'i-lucide-text-quote' },
+        { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-square-code' }
+      ]
+    },
+    {
+      kind: 'clearFormatting',
+      pos: selectedNode.value?.pos,
+      label: 'Reset formatting',
+      icon: 'i-lucide-rotate-ccw'
+    }
+  ], [
+    {
+      kind: 'duplicate',
+      pos: selectedNode.value?.pos,
+      label: 'Duplicate',
+      icon: 'i-lucide-copy'
+    },
+    {
+      label: 'Copy to clipboard',
+      icon: 'i-lucide-clipboard',
+      onSelect: async () => {
+        if (!selectedNode.value) return
+
+        const pos = selectedNode.value.pos
+        const node = editor.state.doc.nodeAt(pos)
+        if (node) {
+          await navigator.clipboard.writeText(node.textContent)
+        }
+      }
+    }
+  ], [
+    {
+      kind: 'moveUp',
+      pos: selectedNode.value?.pos,
+      label: 'Move up',
+      icon: 'i-lucide-arrow-up'
+    },
+    {
+      kind: 'moveDown',
+      pos: selectedNode.value?.pos,
+      label: 'Move down',
+      icon: 'i-lucide-arrow-down'
+    }
+  ], [
+    {
+      kind: 'delete',
+      pos: selectedNode.value?.pos,
+      label: 'Delete',
+      icon: 'i-lucide-trash'
+    }
+  ]], customHandlers) as DropdownMenuItem[][]
+}
+
+const suggestionItems = [[{
+  type: 'label',
+  label: 'Style'
+}, {
+  kind: 'paragraph',
+  label: 'Paragraph',
+  icon: 'i-lucide-type'
+}, {
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'heading',
+  level: 3,
+  label: 'Heading 3',
+  icon: 'i-lucide-heading-3'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'orderedList',
+  label: 'Numbered List',
+  icon: 'i-lucide-list-ordered'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}, {
+  kind: 'codeBlock',
+  label: 'Code Block',
+  icon: 'i-lucide-square-code'
+}], [{
+  type: 'label',
+  label: 'Insert'
+}, {
+  kind: 'mention',
+  label: 'Mention',
+  icon: 'i-lucide-at-sign'
+}, {
+  kind: 'emoji',
+  label: 'Emoji',
+  icon: 'i-lucide-smile-plus'
+}, {
+  kind: 'imageUpload',
+  label: 'Image',
+  icon: 'i-lucide-image'
+}, {
+  kind: 'horizontalRule',
+  label: 'Horizontal Rule',
+  icon: 'i-lucide-separator-horizontal'
+}]] satisfies EditorSuggestionMenuItem<typeof customHandlers>[][]
+
+const mentionItems: EditorMentionMenuItem[] = [{
+  label: 'benjamincanac',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+}, {
+  label: 'HugoRCD',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71938701?v=4' }
+}, {
+  label: 'romhml',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/25613751?v=4' }
+}, {
+  label: 'sandros94',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/13056429?v=4' }
+}, {
+  label: 'hywax',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/149865959?v=4' }
+}, {
+  label: 'J-Michalek',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/71264422?v=4' }
+}, {
+  label: 'genu',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/928780?v=4' }
+}]
+
+const emojiItems: EditorEmojiMenuItem[] = gitHubEmojis.filter(emoji => !emoji.name.startsWith('regional_indicator_'))
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor, handlers }"
+    v-model="content"
+    :extensions="[
+      Emoji,
+      ImageUpload,
+      TextAlign.configure({
+        types: ['heading', 'paragraph']
+      })
+    ]"
+    :handlers="customHandlers"
+    content-type="markdown"
+    autofocus
+    placeholder="Write, type '/' for commands..."
+    class="min-h-0"
+    :ui="{ base: 'sm:px-14', content: 'max-w-2xl mx-auto' }"
+  >
+    <Navbar>
+      <UEditorToolbar :editor="editor" :items="toolbarItems">
+        <template #link>
+          <EditorLinkPopover :editor="editor" auto-open />
+        </template>
+      </UEditorToolbar>
+    </Navbar>
+
+    <UEditorToolbar
+      :editor="editor"
+      :items="toolbarItems"
+      layout="bubble"
+      :should-show="({ editor, view, state }) => {
+        if (editor.isActive('imageUpload') || editor.isActive('image')) {
+          return false
+        }
+        const { selection } = state
+        return view.hasFocus() && !selection.empty
+      }"
+    >
+      <template #link>
+        <EditorLinkPopover :editor="editor" />
+      </template>
+    </UEditorToolbar>
+
+    <UEditorToolbar
+      :editor="editor"
+      :items="imageToolbarItems(editor)"
+      layout="bubble"
+      :should-show="({ editor, view }) => {
+        return editor.isActive('image') && view.hasFocus()
+      }"
+    />
+
+    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="selectedNode = $event">
+      <UButton
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+        @click="(e) => {
+          e.stopPropagation()
+
+          const selected = onClick()
+          handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
+        }"
+      />
+
+      <UDropdownMenu
+        v-slot="{ open }"
+        :modal="false"
+        :items="handleItems(editor)"
+        :content="{ side: 'left' }"
+        :ui="{ content: 'w-48', label: 'text-xs' }"
+        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+      >
+        <UButton
+          color="neutral"
+          variant="ghost"
+          active-variant="soft"
+          size="sm"
+          icon="i-lucide-grip-vertical"
+          :active="open"
+          :class="ui.handle()"
+        />
+      </UDropdownMenu>
+    </UEditorDragHandle>
+
+    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+    <UEditorMentionMenu :editor="editor" :items="mentionItems" />
+    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />
+  </UEditor>
+</template>
diff --git a/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
index fb577b2eb1..aa22070b47 100644
--- a/playgrounds/nuxt/nuxt.config.ts
+++ b/playgrounds/nuxt/nuxt.config.ts
@@ -18,7 +18,7 @@ export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
       // prevents reloading page when navigating between components
-      include: ['@ai-sdk/vue', '@internationalized/date', '@tanstack/vue-table', '@tanstack/vue-virtual', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/core', '@vueuse/integrations/useFuse', '@vueuse/shared', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'ohash/utils', 'reka-ui', 'reka-ui/namespaced', 'scule', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
+      include: ['@ai-sdk/vue', '@internationalized/date', '@tanstack/vue-table', '@tanstack/vue-virtual', '@tiptap/extension-emoji', '@tiptap/vue-3/menus', '@tiptap/core', '@tiptap/extension-drag-handle-vue-3', '@tiptap/extension-horizontal-rule', '@tiptap/extension-image', '@tiptap/extension-mention', '@tiptap/extension-placeholder', '@tiptap/extension-text-align', '@tiptap/markdown', '@tiptap/starter-kit', '@tiptap/vue-3', '@floating-ui/dom', '@tiptap/suggestion', '@tiptap/pm/state', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/core', '@vueuse/integrations/useFuse', '@vueuse/shared', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'ohash/utils', 'prosemirror-state', 'reka-ui', 'reka-ui/namespaced', 'scule', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
     }
   }
 })
diff --git a/playgrounds/nuxt/package.json b/playgrounds/nuxt/package.json
index 1dce89348f..623d6de8ae 100644
--- a/playgrounds/nuxt/package.json
+++ b/playgrounds/nuxt/package.json
@@ -15,6 +15,8 @@
     "@iconify-json/simple-icons": "^1.2.61",
     "@internationalized/date": "^3.10.0",
     "@nuxt/ui": "workspace:*",
+    "@tiptap/extension-emoji": "3.12.0",
+    "@tiptap/extension-text-align": "3.12.0",
     "ai": "^5.0.105",
     "nuxt": "^4.2.1",
     "zod": "^4.1.13"
diff --git a/playgrounds/vue/package.json b/playgrounds/vue/package.json
index 4d989a479d..7b565bf5c4 100644
--- a/playgrounds/vue/package.json
+++ b/playgrounds/vue/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@nuxt/ui": "workspace:*",
+    "@tiptap/extension-emoji": "3.12.0",
+    "@tiptap/extension-text-align": "3.12.0",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3",
     "zod": "^4.1.13"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 790c553c24..27e4d90aa5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,45 @@ importers:
       '@tanstack/vue-virtual':
         specifier: ^3.13.12
         version: 3.13.12(vue@3.5.24(typescript@5.8.3))
+      '@tiptap/core':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/extension-bubble-menu':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-drag-handle-vue-3':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/extension-drag-handle@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/extension-collaboration@3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)))(@tiptap/pm@3.12.0)(@tiptap/vue-3@3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3))
+      '@tiptap/extension-floating-menu':
+        specifier: 3.12.0
+        version: 3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-horizontal-rule':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-image':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-mention':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-placeholder':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/markdown':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/pm':
+        specifier: 3.12.0
+        version: 3.12.0
+      '@tiptap/starter-kit':
+        specifier: 3.12.0
+        version: 3.12.0
+      '@tiptap/suggestion':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/vue-3':
+        specifier: 3.12.0
+        version: 3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(vue@3.5.24(typescript@5.8.3))
       '@unhead/vue':
         specifier: ^2.0.19
         version: 2.0.19(vue@3.5.24(typescript@5.8.3))
@@ -288,6 +327,12 @@ importers:
       '@regle/rules':
         specifier: ^1.11.0
         version: 1.11.0(vue@3.5.24(typescript@5.8.3))
+      '@tiptap/extension-emoji':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(emojibase@17.0.0)
+      '@tiptap/extension-text-align':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
       '@vercel/analytics':
         specifier: ^1.6.0
         version: 1.6.0(nuxt@4.2.1(@parcel/watcher@2.5.1)(@types/node@24.7.0)(@vue/compiler-sfc@3.5.24)(better-sqlite3@12.5.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.1(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(meow@13.2.0)(optionator@0.9.4)(rollup@4.52.5)(terser@5.44.0)(typescript@5.8.3)(vite@7.2.4(@types/node@24.7.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.5(typescript@5.8.3))(yaml@2.8.1))(react@19.2.0)(vue-router@4.6.3(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3))
@@ -381,6 +426,12 @@ importers:
       '@nuxt/ui':
         specifier: workspace:*
         version: link:../..
+      '@tiptap/extension-emoji':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(emojibase@17.0.0)
+      '@tiptap/extension-text-align':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
       ai:
         specifier: ^5.0.105
         version: 5.0.105(zod@4.1.13)
@@ -403,6 +454,12 @@ importers:
       '@nuxt/ui':
         specifier: workspace:*
         version: link:../..
+      '@tiptap/extension-emoji':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(emojibase@17.0.0)
+      '@tiptap/extension-text-align':
+        specifier: 3.12.0
+        version: 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
       vue:
         specifier: ^3.5.24
         version: 3.5.24(typescript@5.8.3)
@@ -1967,6 +2024,9 @@ packages:
     peerDependencies:
       release-it: ^18.0.0 || ^19.0.0
 
+  '@remirror/core-constants@3.0.0':
+    resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
+
   '@remusao/guess-url-type@2.1.0':
     resolution: {integrity: sha512-zI3dlTUxpjvx2GCxp9nLOSK5yEIqDCpxlAVGwb2Y49RKkS72oeNaxxo+VWS5+XQ5+Mf8Zfp9ZXIlk+G5eoEN8A==}
 
@@ -2439,6 +2499,235 @@ packages:
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
 
+  '@tiptap/core@3.12.0':
+    resolution: {integrity: sha512-yy5LHOHgdR5Z3bID9g6Hj6IofqBw8HIHtT8E3SYZXnEWBUhsoXpJVAukXv0wWEZmIbae5PpQYIuklw/QXw26Pw==}
+    peerDependencies:
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-blockquote@3.12.0':
+    resolution: {integrity: sha512-4azSdQodLIuQu+AvaDw7bCwLO2b5rFdL9hoqye8RNVckEiuZnLi8bRQ0Oiz7FMJp7OvuqHvl6+mRt1D7S8Bd/A==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-bold@3.12.0':
+    resolution: {integrity: sha512-XH6BaC2HRkPaM7QdpThVtqlLDsWgjOjRc20JKBQIhH6+KFcSb4KiyRExVUdKqueTcSZwSGlu9/4uaecu3Ref4g==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-bubble-menu@3.12.0':
+    resolution: {integrity: sha512-l6PleGtsN8Nk6CS2DX9AWET2vf1eD97bzUpmF8rcF2XNRDJIcLnductBxmdm0t/Icr6sgxEBnJ4E2kIB9IeX4w==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-bullet-list@3.12.0':
+    resolution: {integrity: sha512-mNwu2TJOBjQjfxe2uW7hCjHei9XfH6irvvN/F09biv6QcNt7lG3PL15f8IEpAJD86yshIGH184BOvWM3RLYI+Q==}
+    peerDependencies:
+      '@tiptap/extension-list': ^3.12.0
+
+  '@tiptap/extension-code-block@3.12.0':
+    resolution: {integrity: sha512-NYZ2EbcHgxsOvxNqAFnkQTDMyJeMZFgPq9WUxD71vzXjHCRjWvWI2rtbaNGpQcYV6h4gXgOeOTgYWycrQDbHew==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-code@3.12.0':
+    resolution: {integrity: sha512-6e5tAIfBBfA693VkHyGSEdIwGv59l9zIsajguJqON9En6bd9L6UFKaCZV8NUZtMxc64Yr3rMtdwBacsrhX2BoQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-collaboration@3.11.1':
+    resolution: {integrity: sha512-vfSId1TG8zXofx4RVvH7xqp665TlZi/AEzlP2nOs8zy3elzQh4ake5JoW7euplCTuHXfv4APjKh09DFbXNx4Mw==}
+    peerDependencies:
+      '@tiptap/core': ^3.11.1
+      '@tiptap/pm': ^3.11.1
+      '@tiptap/y-tiptap': ^3.0.0
+      yjs: ^13
+
+  '@tiptap/extension-document@3.12.0':
+    resolution: {integrity: sha512-dxRXot8sC9gBKGs99ehSS1UfWAH48mBrFMF8xlayPKuc75IO8GRen78uU8h73FLlKip5TDqRZUpBU3/d3WlBxQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-drag-handle-vue-3@3.12.0':
+    resolution: {integrity: sha512-zDPR8EgzuIk01uOwnRCEwL7sTF9hfoeT/oMsGC7nScXT80eECjU+eAx746DOkiRlJ6eJbiFf7RjbfskFkILFEQ==}
+    peerDependencies:
+      '@tiptap/extension-drag-handle': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+      '@tiptap/vue-3': ^3.12.0
+      vue: ^3.0.0
+
+  '@tiptap/extension-drag-handle@3.12.0':
+    resolution: {integrity: sha512-eND0zWQnqbgEBnDEPtFT/lW8zgG/H+P+sH/09D6s9006M16wM9dngibpPYqhTjY0bWxIRLU8o++IqwwdOR8xng==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/extension-collaboration': ^3.12.0
+      '@tiptap/extension-node-range': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+      '@tiptap/y-tiptap': ^3.0.0
+
+  '@tiptap/extension-dropcursor@3.12.0':
+    resolution: {integrity: sha512-bmCe0Sg7FkbNsJ/xea6iOgWY4MNkWe0U7Mq4C4eWW2gUfCfkXUKKpsPizwc7knduAy+/HqrpM2wr+VdKiIf7tA==}
+    peerDependencies:
+      '@tiptap/extensions': ^3.12.0
+
+  '@tiptap/extension-emoji@3.12.0':
+    resolution: {integrity: sha512-p78vT4wm6P5YZxDQPFmSpMNpDyNHzt2RAT0nKjZKIeEf1nxPIv/fZX1vY1LaQY4fy/x6xoFPbuW/5bDTRbV+KQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+      '@tiptap/suggestion': ^3.12.0
+
+  '@tiptap/extension-floating-menu@3.12.0':
+    resolution: {integrity: sha512-0aSUvJbO8H2DeiDYV5eC90JjM89RVs7nK+ljpGwy0W3W11Ho2uMGS1eznCfR4sLZW4HKTNIjyHIxq18ESIKSGQ==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-gapcursor@3.12.0':
+    resolution: {integrity: sha512-A3sjuiqnzqPOOvkgkeKs1vP4YsTC7e6ThbVBNhcP4sOD++CFERUh9nxFw0iEEbDR1BnITaKpC3v06SkdjS94oQ==}
+    peerDependencies:
+      '@tiptap/extensions': ^3.12.0
+
+  '@tiptap/extension-hard-break@3.12.0':
+    resolution: {integrity: sha512-vSkdduLS8XKFl6rLQphxtIz8Qr4xlIKwVTvE39jsTLxuMAlxWWdJgSQtMSL1udLNOVZjHN7nNf8F3qmzOp7QBQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-heading@3.12.0':
+    resolution: {integrity: sha512-lXpamseuGEiLWjjVxT5HXgDem/sjVuqiRPOs+BcG+p+545Dig0sehxmD/2ZYBe0lgoWlh3R9iIwaYCQfrmrwtw==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-horizontal-rule@3.12.0':
+    resolution: {integrity: sha512-OGbkDNqZPhxG0EpGa6I8l2Fy98Tuccr+nLoeAazxu5YzlUma34KtTNGZdo+38VU7giddr7zIHRJKJNt0hrOz5g==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-image@3.12.0':
+    resolution: {integrity: sha512-E+nQmMaHdR5SFDuIZUEdfaaNmRuO47V2KQIIOUT6BIxXkArixaKIIz/BKtzYq4pKySkHWL1niYe5lfZWVmEXaw==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-italic@3.12.0':
+    resolution: {integrity: sha512-duCzXPP4PeQbNdGvKQT0V10/2LNEn3qpwlJraGl5M+7s2samADK4rQ7buv4EaO9BgmVlg8iHlGPwXoKWmoSOfQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-link@3.12.0':
+    resolution: {integrity: sha512-C363e6JgIX/McpYWAgJxbUHZecPYs6mcZzrg6lqjgjUDPAiHXEY3WR/lHCC3XuZ4ZAvffRsKXcjX6ewdIkf4Uw==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-list-item@3.12.0':
+    resolution: {integrity: sha512-8I/NLZ34Yy/gpmSk95GjAmNhgxIFuCl6FRTYVHahtoUVUkHlWK0TJJqK0ykpz94GzNTvmpXGe5GUXIO8avf5Cw==}
+    peerDependencies:
+      '@tiptap/extension-list': ^3.12.0
+
+  '@tiptap/extension-list-keymap@3.12.0':
+    resolution: {integrity: sha512-gDTecgWgztBfPjUzLYosHQYoyMw3gAEEJ3Yd67dHiijuaarjJ0buWdKg+uJ/ZnD15bP2D4ug4M9zgnPDq5llzQ==}
+    peerDependencies:
+      '@tiptap/extension-list': ^3.12.0
+
+  '@tiptap/extension-list@3.12.0':
+    resolution: {integrity: sha512-RCQb3MPsTsKZZ8Wf0maMnfcICcmYEbMfWJMUNwVUJCfEv1hGiA5J7jMEJWr7z6kH2ULDHmrkhg6BYCdLrJap/w==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-mention@3.12.0':
+    resolution: {integrity: sha512-oLUKzXNJL0i8F2R+ZbvbOkn3BMsbMze9YbF9DDJJKxF/AJ6RTmAnfa0W5cQdazBTPb+09xyoytUmLoFNwLQM9Q==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+      '@tiptap/suggestion': ^3.12.0
+
+  '@tiptap/extension-node-range@3.12.0':
+    resolution: {integrity: sha512-RVAmj7Q4G1qjcfcvnFHFaMbNPLx+Sv7kRusj/NkL//UWl+UWkWjiy3LUWGnibdLwcDLpkWlU5RjcW/viWBgFFQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/extension-ordered-list@3.12.0':
+    resolution: {integrity: sha512-5oRfBW5F89b4EKE/N0FiXF2n2eyWXB6uGpMkXdowMmPUVjWPVnmf+dTIW/XM8qQxyInh7m0eXPFXYkt9vdB+Vg==}
+    peerDependencies:
+      '@tiptap/extension-list': ^3.12.0
+
+  '@tiptap/extension-paragraph@3.12.0':
+    resolution: {integrity: sha512-J8HPJajgV0cIkA4wK7wBNJSpiNmi5Vd/Ii94hi6wpCbIdMMkfj8ngeXzVjVO/6Hpm2Xyr21OPbv2g3I6pgVAGA==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-placeholder@3.12.0':
+    resolution: {integrity: sha512-fYG48/nQ384BSVdfGm+GZW5Jly8Ey/XBjsFTAmNiOi77zhqGpifNBFEMi3PrkxyQSKNm5Mkif8ZuJDQmQ9MmwA==}
+    peerDependencies:
+      '@tiptap/extensions': ^3.12.0
+
+  '@tiptap/extension-strike@3.12.0':
+    resolution: {integrity: sha512-OSR9SB3ycrKH0gCUkCWdd0IoNCp15xpbV0h7D8ElQBZ249c/FZrm6kGwB25fzdyA8ZlTpWrfwnoHxmMcOCMVIg==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-text-align@3.12.0':
+    resolution: {integrity: sha512-OpfLVZWHl1HiZ6bSlqh1GcHrm2wjHH5Ctbi4kBG7NvMZFY1aDPzYcULW5Xwc1EArefKd7rZRpKPWBJnre4RrFg==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-text@3.12.0':
+    resolution: {integrity: sha512-7AlIYbmEeT3zAYCWrPTunaZkyIWriJtEAmUzURlQVVKmNv6kCTyJcqX7N0Db8z8Z19UFHaVAODL8yXYde4QB/w==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extension-underline@3.12.0':
+    resolution: {integrity: sha512-Woh/nk1/7c31D14dIaU5i9d4NMK06TBeEA+uBidhZp+JAXVGMeQGm0K2iJxBXNvNrc6aKGlZ57W1o3CPUWOlWQ==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+
+  '@tiptap/extensions@3.12.0':
+    resolution: {integrity: sha512-N5ahZfeTBWROTNHFLmTW7sa6ZrZwvp/jJHyH7tcetXT+509vHVhX7yPoiLDt0fnXIDW7JrWI7jbRRmcKf79I2w==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/markdown@3.12.0':
+    resolution: {integrity: sha512-J11GqQaOpMGUJCdlWuM7KMOKPKGZEg5uRxk5HPK6gwAe+nT/bfd/YD6rkrZZAdCRCUTCJl/4xSSznPda1Jwgcw==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/pm@3.12.0':
+    resolution: {integrity: sha512-A2Hs6fdd9nFyIzdmJ9zoJvVuGsdwbQB+QA0TgBMTWwjyTRilpMeIhMX2qXNDzPFVy2aS4+QjvIpcHeArfbJ2bQ==}
+
+  '@tiptap/starter-kit@3.12.0':
+    resolution: {integrity: sha512-7MdEUl87JfIPM48kIJwijL1X12RRMhGms1d7m0faYZvgn+CAKC5uWx4650E/aTqTItqWTmQZGoLyKDiXqR7Nxw==}
+
+  '@tiptap/suggestion@3.12.0':
+    resolution: {integrity: sha512-VJfl9IkwRNbjNKfTdVDnxZgdoE/dyrNkRk/LMogHK5PS3yZ2dXQBPoCVpWfjl7u8GOh2LOQb+9YxeOkNUSx4Ew==}
+    peerDependencies:
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+
+  '@tiptap/vue-3@3.12.0':
+    resolution: {integrity: sha512-LruLyWnra7JqZOLkEPvxvEnmRTcSkqXazB8/yFJeOZDD9mdA4wTN5ba6+LEWcWIYXA4v8GX1vKGLAX19324tIQ==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': ^3.12.0
+      '@tiptap/pm': ^3.12.0
+      vue: ^3.0.0
+
+  '@tiptap/y-tiptap@3.0.1':
+    resolution: {integrity: sha512-F3hj5X77ckmyIywbCQpKgyX3xKra2/acJPWaV5R9wqp0cUPBmm62FYbkQ6HaqxH1VhCkUhhAZcDSQjbjj7tnWw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      prosemirror-model: ^1.7.1
+      prosemirror-state: ^1.2.3
+      prosemirror-view: ^1.9.10
+      y-protocols: ^1.0.1
+      yjs: ^13.5.38
+
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
@@ -2463,15 +2752,24 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
   '@types/lodash@4.17.20':
     resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -3564,6 +3862,9 @@ packages:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   croner@9.1.0:
     resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
     engines: {node: '>=18.0'}
@@ -3888,12 +4189,24 @@ packages:
     resolution: {integrity: sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==}
     engines: {node: '>=10.0.0'}
 
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  emojibase-data@15.3.2:
+    resolution: {integrity: sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A==}
+    peerDependencies:
+      emojibase: '*'
+
+  emojibase@17.0.0:
+    resolution: {integrity: sha512-bXdpf4HPY3p41zK5swVKZdC/VynsMZ4LoLxdYDE+GucqkFwzcM1GVc4ODfYAlwoKaf2U2oNNUoOO78N96ovpBA==}
+    engines: {node: '>=18.12.0'}
+
   emojilib@2.4.0:
     resolution: {integrity: sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==}
 
@@ -4718,6 +5031,9 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-emoji-supported@0.0.5:
+    resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4816,6 +5132,9 @@ packages:
     resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
     engines: {node: '>=16'}
 
+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
   issue-parser@7.0.1:
     resolution: {integrity: sha512-3YZcUUR2Wt1WsapF+S/WiA2WmlW0cWAoPccMqne7AxEBhCdFeTPjfv/Axb8V2gyCgY3nRw+ksZ3xSUX+R47iAg==}
     engines: {node: ^18.17 || >=20.6.1}
@@ -4931,6 +5250,11 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lib0@0.2.114:
+    resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   lighthouse-logger@2.0.2:
     resolution: {integrity: sha512-vWl2+u5jgOQuZR55Z1WM0XDdrJT6mzMP8zHUct7xTlWhuQs+eV0g+QL0RQdFjT54zVmbhLCP8vIVpy1wGn/gCg==}
 
@@ -5014,6 +5338,12 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
+  linkifyjs@4.3.2:
+    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
+
   listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
     hasBin: true
@@ -5105,9 +5435,18 @@ packages:
   magicast@0.5.1:
     resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   marky@1.3.0:
     resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
 
@@ -5166,6 +5505,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
@@ -5633,6 +5975,9 @@ packages:
     resolution: {integrity: sha512-m0pg2zscbYgWbqRR6ABga5c3sZdEon7bSgjnlXC64kxtxLOyjRcbbUkLj7HFyy/FTD+P2xdBWu8snGhYI0jc4A==}
     engines: {node: '>=20'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   os-name@6.1.0:
     resolution: {integrity: sha512-zBd1G8HkewNd2A8oQ8c6BN/f/c9EId7rSUueOLGu28govmUctXmM+3765GwsByv9nYUdrLqHphXlYIc86saYsg==}
     engines: {node: '>=18'}
@@ -6023,6 +6368,64 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  prosemirror-changeset@2.3.1:
+    resolution: {integrity: sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==}
+
+  prosemirror-collab@1.3.1:
+    resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==}
+
+  prosemirror-commands@1.7.1:
+    resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+
+  prosemirror-dropcursor@1.8.2:
+    resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==}
+
+  prosemirror-gapcursor@1.4.0:
+    resolution: {integrity: sha512-z00qvurSdCEWUIulij/isHaqu4uLS8r/Fi61IbjdIPJEonQgggbJsLnstW7Lgdk4zQ68/yr6B6bf7sJXowIgdQ==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-markdown@1.13.2:
+    resolution: {integrity: sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==}
+
+  prosemirror-menu@1.2.5:
+    resolution: {integrity: sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==}
+
+  prosemirror-model@1.25.4:
+    resolution: {integrity: sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==}
+
+  prosemirror-schema-basic@1.2.4:
+    resolution: {integrity: sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.1:
+    resolution: {integrity: sha512-DAgDoUYHCcc6tOGpLVPSU1k84kCUWTWnfWX3UDy2Delv4ryH0KqTD6RBI6k4yi9j9I8gl3j8MkPpRD/vWPZbug==}
+
+  prosemirror-trailing-node@3.0.0:
+    resolution: {integrity: sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==}
+    peerDependencies:
+      prosemirror-model: ^1.22.1
+      prosemirror-state: ^1.4.2
+      prosemirror-view: ^1.33.8
+
+  prosemirror-transform@1.10.5:
+    resolution: {integrity: sha512-RPDQCxIDhIBb1o36xxwsaeAvivO8VLJcgBtzmOwQ64bMtsVFh5SSuJ6dWSxO1UsHTiTXPCgQm3PDJt7p6IOLbw==}
+
+  prosemirror-view@1.41.4:
+    resolution: {integrity: sha512-WkKgnyjNncri03Gjaz3IFWvCAE94XoiEgvtr0/r2Xw7R8/IjK3sKLSiDoCHWcsXSAinVaKlGRZDvMCsF1kbzjA==}
+
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
@@ -6043,6 +6446,10 @@ packages:
   pump@3.0.3:
     resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6267,6 +6674,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   router@2.2.0:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
@@ -6813,6 +7223,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
@@ -7294,6 +7707,9 @@ packages:
       typescript:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   walk-up-path@4.0.0:
     resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
     engines: {node: 20 || >=22}
@@ -7406,6 +7822,12 @@ packages:
     engines: {node: '>= 0.10.0'}
     hasBin: true
 
+  y-protocols@1.0.6:
+    resolution: {integrity: sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -7433,6 +7855,10 @@ packages:
   yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
 
+  yjs@13.6.27:
+    resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -9685,6 +10111,8 @@ snapshots:
       - conventional-commits-filter
       - conventional-commits-parser
 
+  '@remirror/core-constants@3.0.0': {}
+
   '@remusao/guess-url-type@2.1.0': {}
 
   '@remusao/small@2.1.0': {}
@@ -10060,6 +10488,251 @@ snapshots:
       '@tanstack/virtual-core': 3.13.12
       vue: 3.5.24(typescript@5.8.3)
 
+  '@tiptap/core@3.12.0(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-blockquote@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-bold@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-bubble-menu@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-bullet-list@3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-code-block@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-code@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-collaboration@3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      '@tiptap/y-tiptap': 3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      yjs: 13.6.27
+
+  '@tiptap/extension-document@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-drag-handle-vue-3@3.12.0(@tiptap/extension-drag-handle@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/extension-collaboration@3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)))(@tiptap/pm@3.12.0)(@tiptap/vue-3@3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3))':
+    dependencies:
+      '@tiptap/extension-drag-handle': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/extension-collaboration@3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))
+      '@tiptap/pm': 3.12.0
+      '@tiptap/vue-3': 3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(vue@3.5.24(typescript@5.8.3))
+      vue: 3.5.24(typescript@5.8.3)
+
+  '@tiptap/extension-drag-handle@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/extension-collaboration@3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/extension-collaboration': 3.11.1(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)
+      '@tiptap/extension-node-range': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      '@tiptap/y-tiptap': 3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+
+  '@tiptap/extension-dropcursor@3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extensions': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-emoji@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))(emojibase@17.0.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      '@tiptap/suggestion': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      emoji-regex: 10.6.0
+      emojibase-data: 15.3.2(emojibase@17.0.0)
+      is-emoji-supported: 0.0.5
+    transitivePeerDependencies:
+      - emojibase
+
+  '@tiptap/extension-floating-menu@3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-gapcursor@3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extensions': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-hard-break@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-heading@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-horizontal-rule@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-image@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-italic@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-link@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      linkifyjs: 4.3.2
+
+  '@tiptap/extension-list-item@3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-list-keymap@3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-mention@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      '@tiptap/suggestion': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-node-range@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/extension-ordered-list@3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extension-list': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-paragraph@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-placeholder@3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/extensions': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-strike@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-text-align@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-text@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extension-underline@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+
+  '@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/markdown@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      marked: 15.0.12
+
+  '@tiptap/pm@3.12.0':
+    dependencies:
+      prosemirror-changeset: 2.3.1
+      prosemirror-collab: 1.3.1
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.4.0
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-markdown: 1.13.2
+      prosemirror-menu: 1.2.5
+      prosemirror-model: 1.25.4
+      prosemirror-schema-basic: 1.2.4
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.1
+      prosemirror-trailing-node: 3.0.0(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)
+      prosemirror-transform: 1.10.5
+      prosemirror-view: 1.41.4
+
+  '@tiptap/starter-kit@3.12.0':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/extension-blockquote': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-bold': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-bullet-list': 3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-code': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-code-block': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-document': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-dropcursor': 3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-gapcursor': 3.12.0(@tiptap/extensions@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-hard-break': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-heading': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-horizontal-rule': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-italic': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-link': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-list': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-list-item': 3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-list-keymap': 3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-ordered-list': 3.12.0(@tiptap/extension-list@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0))
+      '@tiptap/extension-paragraph': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-strike': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-text': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extension-underline': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))
+      '@tiptap/extensions': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/suggestion@3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)':
+    dependencies:
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+
+  '@tiptap/vue-3@3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)(vue@3.5.24(typescript@5.8.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@tiptap/core': 3.12.0(@tiptap/pm@3.12.0)
+      '@tiptap/pm': 3.12.0
+      vue: 3.5.24(typescript@5.8.3)
+    optionalDependencies:
+      '@tiptap/extension-bubble-menu': 3.12.0(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+      '@tiptap/extension-floating-menu': 3.12.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.12.0(@tiptap/pm@3.12.0))(@tiptap/pm@3.12.0)
+
+  '@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      lib0: 0.2.114
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.4
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -10085,16 +10758,25 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.20
 
   '@types/lodash@4.17.20': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/mdurl@2.0.0': {}
+
   '@types/ms@2.1.0': {}
 
   '@types/node@20.19.19':
@@ -11281,6 +11963,8 @@ snapshots:
       crc-32: 1.2.2
       readable-stream: 4.7.0
 
+  crelt@1.0.6: {}
+
   croner@9.1.0: {}
 
   cross-spawn@7.0.6:
@@ -11561,10 +12245,18 @@ snapshots:
 
   emoji-regex-xs@2.0.1: {}
 
+  emoji-regex@10.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
+  emojibase-data@15.3.2(emojibase@17.0.0):
+    dependencies:
+      emojibase: 17.0.0
+
+  emojibase@17.0.0: {}
+
   emojilib@2.4.0: {}
 
   emoticon@4.1.0: {}
@@ -12643,6 +13335,8 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-emoji-supported@0.0.5: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -12712,6 +13406,8 @@ snapshots:
 
   isexe@3.1.1: {}
 
+  isomorphic.js@0.2.5: {}
+
   issue-parser@7.0.1:
     dependencies:
       lodash.capitalize: 4.2.1
@@ -12820,6 +13516,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lib0@0.2.114:
+    dependencies:
+      isomorphic.js: 0.2.5
+
   lighthouse-logger@2.0.2:
     dependencies:
       debug: 4.4.3
@@ -12885,6 +13585,12 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
+  linkifyjs@4.3.2: {}
+
   listhen@1.9.0:
     dependencies:
       '@parcel/watcher': 2.5.1
@@ -12992,8 +13698,19 @@ snapshots:
       '@babel/types': 7.28.5
       source-map-js: 1.2.1
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   markdown-table@3.0.4: {}
 
+  marked@15.0.12: {}
+
   marky@1.3.0: {}
 
   maska@3.2.0: {}
@@ -13124,6 +13841,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  mdurl@2.0.0: {}
+
   media-typer@1.1.0: {}
 
   meow@13.2.0: {}
@@ -14063,6 +14782,8 @@ snapshots:
       string-width: 8.1.0
       strip-ansi: 7.1.2
 
+  orderedmap@2.1.1: {}
+
   os-name@6.1.0:
     dependencies:
       macos-release: 3.4.0
@@ -14478,6 +15199,109 @@ snapshots:
 
   property-information@7.1.0: {}
 
+  prosemirror-changeset@2.3.1:
+    dependencies:
+      prosemirror-transform: 1.10.5
+
+  prosemirror-collab@1.3.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+
+  prosemirror-commands@1.7.1:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+
+  prosemirror-dropcursor@1.8.2:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+      prosemirror-view: 1.41.4
+
+  prosemirror-gapcursor@1.4.0:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.4
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+      prosemirror-view: 1.41.4
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-markdown@1.13.2:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+      prosemirror-model: 1.25.4
+
+  prosemirror-menu@1.2.5:
+    dependencies:
+      crelt: 1.0.6
+      prosemirror-commands: 1.7.1
+      prosemirror-history: 1.5.0
+      prosemirror-state: 1.4.4
+
+  prosemirror-model@1.25.4:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-basic@1.2.4:
+    dependencies:
+      prosemirror-model: 1.25.4
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-transform: 1.10.5
+      prosemirror-view: 1.41.4
+
+  prosemirror-tables@1.8.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+      prosemirror-view: 1.41.4
+
+  prosemirror-trailing-node@3.0.0(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.4):
+    dependencies:
+      '@remirror/core-constants': 3.0.0
+      escape-string-regexp: 4.0.0
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.4
+
+  prosemirror-transform@1.10.5:
+    dependencies:
+      prosemirror-model: 1.25.4
+
+  prosemirror-view@1.41.4:
+    dependencies:
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.10.5
+
   proto-list@1.2.4: {}
 
   protocols@2.0.2: {}
@@ -14507,6 +15331,8 @@ snapshots:
       end-of-stream: 1.4.5
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   puppeteer-core@24.28.0:
@@ -14880,6 +15706,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.52.5
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
   router@2.2.0:
     dependencies:
       debug: 4.4.3
@@ -15470,6 +16298,8 @@ snapshots:
 
   typescript@5.8.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.6.1: {}
 
   uglify-js@3.19.3:
@@ -16056,6 +16886,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  w3c-keyname@2.2.8: {}
+
   walk-up-path@4.0.0: {}
 
   web-namespaces@2.0.1: {}
@@ -16136,6 +16968,11 @@ snapshots:
       cssfilter: 0.0.10
     optional: true
 
+  y-protocols@1.0.6(yjs@13.6.27):
+    dependencies:
+      lib0: 0.2.114
+      yjs: 13.6.27
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -16161,6 +16998,10 @@ snapshots:
       buffer-crc32: 0.2.13
       fd-slicer: 1.1.0
 
+  yjs@13.6.27:
+    dependencies:
+      lib0: 0.2.114
+
   yocto-queue@0.1.0: {}
 
   yoctocolors-cjs@2.1.3: {}
diff --git a/renovate.json b/renovate.json
index 6693454265..3d1e530d57 100644
--- a/renovate.json
+++ b/renovate.json
@@ -30,6 +30,26 @@
         "vaul-vue"
       ]
     },
+    {
+      "groupName": "tiptap",
+      "matchPackageNames": [
+        "@tiptap/core",
+        "@tiptap/extension-bubble-menu",
+        "@tiptap/extension-drag-handle-vue-3",
+        "@tiptap/extension-emoji",
+        "@tiptap/extension-floating-menu",
+        "@tiptap/extension-horizontal-rule",
+        "@tiptap/extension-image",
+        "@tiptap/extension-mention",
+        "@tiptap/extension-placeholder",
+        "@tiptap/extension-text-align",
+        "@tiptap/markdown",
+        "@tiptap/pm",
+        "@tiptap/starter-kit",
+        "@tiptap/suggestion",
+        "@tiptap/vue-3"
+      ]
+    },
     {
       "groupName": "vite",
       "matchPackageNames": [
diff --git a/src/runtime/components/Editor.vue b/src/runtime/components/Editor.vue
new file mode 100644
index 0000000000..492d2053ca
--- /dev/null
+++ b/src/runtime/components/Editor.vue
@@ -0,0 +1,246 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { Editor as TiptapEditor, EditorOptions, Content } from '@tiptap/vue-3'
+import type { StarterKitOptions } from '@tiptap/starter-kit'
+import type { PlaceholderOptions } from '@tiptap/extension-placeholder'
+import type { MarkdownExtensionOptions } from '@tiptap/markdown'
+import type { ImageOptions } from '@tiptap/extension-image'
+import type { MentionOptions } from '@tiptap/extension-mention'
+import theme from '#build/ui/editor'
+import type { EditorHandlers, EditorCustomHandlers } from '../types/editor'
+import type { ComponentConfig } from '../types/tv'
+
+type Editor = ComponentConfig<typeof theme, AppConfig, 'editor'>
+
+export type EditorContentType = 'json' | 'html' | 'markdown'
+
+export interface EditorProps<T extends Content = Content, H extends EditorCustomHandlers = EditorCustomHandlers> extends Omit<Partial<EditorOptions>, 'content' | 'element'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  modelValue?: T
+  /**
+   * The content type the content is provided as.
+   * When not specified, it's automatically inferred: strings are treated as 'html', objects as 'json'.
+   */
+  contentType?: EditorContentType
+  /**
+   * The starter kit options to configure the editor.
+   * @defaultValue { headings: { levels: [1, 2, 3, 4] }, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }
+   * @see https://tiptap.dev/docs/editor/extensions/functionality/starterkit
+   */
+  starterKit?: Partial<StarterKitOptions>
+  /**
+   * The placeholder text to show in empty paragraphs.
+   * `{ showOnlyWhenEditable: false, showOnlyCurrent: true }`{lang="ts-type"}
+   * Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`.
+   * @see https://tiptap.dev/docs/editor/extensions/functionality/placeholder
+   */
+  placeholder?: string | Partial<PlaceholderOptions>
+  /**
+   * The markdown extension options to configure markdown parsing and serialization.
+   * @see https://tiptap.dev/docs/editor/extensions/functionality/markdown
+   */
+  markdown?: Partial<MarkdownExtensionOptions>
+  /**
+   * The image extension options to configure image handling.
+   * @see https://tiptap.dev/docs/editor/extensions/nodes/image
+   */
+  image?: Partial<ImageOptions>
+  /**
+   * The mention extension options to configure mention handling.
+   * @see https://tiptap.dev/docs/editor/extensions/nodes/mention
+   */
+  mention?: Partial<MentionOptions>
+  /**
+   * Custom item handlers to override or extend the default handlers.
+   * These handlers are provided to all child components (toolbar, suggestion menu, etc.).
+   */
+  handlers?: H
+  class?: any
+  ui?: Editor['slots']
+}
+
+export interface EditorEmits<T extends Content = Content> {
+  'update:modelValue': [value: T]
+}
+
+export interface EditorSlots<H extends EditorCustomHandlers = EditorCustomHandlers> {
+  default(props: { editor: TiptapEditor, handlers: EditorHandlers<H> }): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends Content, H extends EditorCustomHandlers">
+import { computed, provide, useAttrs, watch } from 'vue'
+import { defu } from 'defu'
+import { Primitive, useForwardProps } from 'reka-ui'
+import { mergeAttributes } from '@tiptap/core'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import Image from '@tiptap/extension-image'
+import Mention from '@tiptap/extension-mention'
+import Placeholder from '@tiptap/extension-placeholder'
+import { Markdown } from '@tiptap/markdown'
+import StarterKit from '@tiptap/starter-kit'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import { reactiveOmit } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { createHandlers } from '../utils/editor'
+import { tv } from '../utils/tv'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<EditorProps<T, H>>()
+const emits = defineEmits<EditorEmits<T>>()
+defineSlots<EditorSlots<H>>()
+
+const attrs = useAttrs()
+
+const appConfig = useAppConfig() as Editor['AppConfig']
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editor || {}) })())
+
+const rootProps = useForwardProps(reactiveOmit(props, 'starterKit', 'extensions', 'editorProps', 'contentType', 'class', 'placeholder', 'markdown', 'image', 'mention', 'handlers'))
+
+const editorProps = computed(() => defu(props.editorProps, {
+  attributes: {
+    autocomplete: 'off',
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    ...attrs,
+    class: ui.value.base({ class: props.ui?.base })
+  }
+} as EditorOptions['editorProps']))
+const contentType = computed(() => props.contentType || (typeof props.modelValue === 'string' ? 'html' : 'json'))
+const starterKit = computed(() => defu(props.starterKit, {
+  horizontalRule: false,
+  headings: {
+    levels: [1, 2, 3, 4]
+  },
+  dropcursor: {
+    color: 'var(--ui-primary)',
+    width: 2
+  },
+  link: {
+    openOnClick: false
+  }
+} as Partial<StarterKitOptions>))
+const placeholder = computed(() => defu(typeof props.placeholder === 'string' ? { placeholder: props.placeholder } : props.placeholder, {
+  showOnlyWhenEditable: false,
+  showOnlyCurrent: true
+} as Partial<PlaceholderOptions>))
+const markdown = computed(() => defu(props.markdown, {
+  markedOptions: {
+    gfm: true
+  }
+} as Partial<MarkdownExtensionOptions>))
+const image = computed(() => defu(props.image, {} as Partial<ImageOptions>))
+const mention = computed(() => defu(props.mention, {
+  HTMLAttributes: {
+    class: 'mention'
+  }
+} as Partial<MentionOptions>))
+
+const extensions = computed(() => [
+  contentType.value === 'markdown' && Markdown.configure(markdown.value),
+  StarterKit.configure(starterKit.value),
+  HorizontalRule.extend({
+    renderHTML() {
+      return [
+        'div',
+        mergeAttributes(this.options.HTMLAttributes, { 'data-type': this.name }),
+        ['hr']
+      ]
+    }
+  }),
+  Image.configure(image.value),
+  props.placeholder && Placeholder.configure(placeholder.value),
+  Mention.configure(mention.value),
+  ...(props.extensions || [])
+].filter(extension => !!extension))
+
+const editor = useEditor({
+  ...rootProps.value,
+  content: props.modelValue,
+  contentType: contentType.value,
+  extensions: extensions.value,
+  editorProps: editorProps.value,
+  onUpdate: ({ editor }) => {
+    let value
+    try {
+      if (contentType.value === 'html') {
+        value = editor.getHTML()
+      } else if (contentType.value === 'json') {
+        value = editor.getJSON()
+      } else if (contentType.value === 'markdown') {
+        value = editor.getMarkdown()
+      }
+    } catch (error) {
+      value = editor.getText()
+    }
+
+    emits('update:modelValue', value as T)
+  }
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (!editor.value || newVal == null) {
+    return
+  }
+
+  const currentContent = contentType.value === 'html'
+    ? editor.value.getHTML()
+    : contentType.value === 'json'
+      ? JSON.stringify(editor.value.getJSON())
+      : contentType.value === 'markdown'
+        ? editor.value.getMarkdown()
+        : editor.value.getText()
+
+  const newContent = contentType.value === 'json' && typeof newVal === 'object'
+    ? JSON.stringify(newVal)
+    : String(newVal)
+
+  if (currentContent !== newContent) {
+    // Store current cursor position
+    const currentSelection = editor.value.state.selection
+    const currentPos = currentSelection.from
+
+    // Set the new content
+    editor.value.commands.setContent(newVal)
+
+    // Restore cursor position if the position is still valid in the new content
+    const newDoc = editor.value.state.doc
+    if (currentPos <= newDoc.content.size) {
+      editor.value.commands.setTextSelection(currentPos)
+    }
+  }
+})
+
+const handlers = computed(() => ({
+  ...createHandlers(),
+  ...props.handlers
+}) as EditorHandlers<H>)
+
+provide('editorHandlers', handlers)
+
+defineExpose({
+  editor
+})
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <template v-if="editor">
+      <slot :editor="editor" :handlers="handlers" />
+
+      <EditorContent
+        role="presentation"
+        :editor="editor"
+        data-slot="content"
+        :class="ui.content({ class: props.ui?.content })"
+      />
+    </template>
+  </Primitive>
+</template>
diff --git a/src/runtime/components/EditorDragHandle.vue b/src/runtime/components/EditorDragHandle.vue
new file mode 100644
index 0000000000..220113b948
--- /dev/null
+++ b/src/runtime/components/EditorDragHandle.vue
@@ -0,0 +1,160 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { Placement, Strategy } from '@floating-ui/dom'
+import type { Editor, JSONContent } from '@tiptap/vue-3'
+import type { DragHandleProps } from '@tiptap/extension-drag-handle-vue-3'
+import theme from '#build/ui/editor-drag-handle'
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types'
+import type { FloatingUIOptions } from '../types/editor'
+import type { ComponentConfig } from '../types/tv'
+
+type EditorDragHandle = ComponentConfig<typeof theme, AppConfig, 'editorDragHandle'>
+
+export interface EditorDragHandleProps extends Omit<DragHandleProps, 'editor' | 'element' | 'onNodeChange' | 'computePositionConfig' | 'class'>, Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
+  /**
+   * @defaultValue appConfig.ui.icons.drag
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
+  /**
+   * @defaultValue 'neutral'
+   */
+  color?: ButtonProps['color']
+  /**
+   * @defaultValue 'ghost'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The options for positioning the drag handle. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+   * @defaultValue { strategy: 'absolute', placement: 'left-start' }
+   * @see https://floating-ui.com/docs/computePosition#options
+   */
+  options?: FloatingUIOptions
+  editor: Editor
+  ui?: EditorDragHandle['slots'] & ButtonProps['ui']
+}
+
+export interface EditorDragHandleSlots {
+  default(props: { ui: EditorDragHandle['ui'], onClick: () => { node: JSONContent, pos: number } | undefined }): any
+}
+
+export interface EditorDragHandleEmits {
+  nodeChange: [{ node: JSONContent, pos: number }]
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DragHandle from '@tiptap/extension-drag-handle-vue-3'
+import { useForwardProps } from 'reka-ui'
+import { reactiveOmit, reactivePick } from '@vueuse/core'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+import { buildFloatingUIMiddleware } from '../utils/editor'
+import { transformUI } from '../utils'
+import { tv } from '../utils/tv'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<EditorDragHandleProps>(), {
+  color: 'neutral',
+  variant: 'ghost',
+  size: 'sm'
+})
+defineSlots<EditorDragHandleSlots>()
+const emit = defineEmits<EditorDragHandleEmits>()
+
+const dragHandleProps = useForwardProps(reactivePick(props, 'pluginKey', 'onElementDragEnd', 'onElementDragStart', 'getReferencedVirtualElement'))
+const buttonProps = useForwardProps(reactiveOmit(props, 'icon', 'options', 'editor', 'pluginKey', 'onElementDragEnd', 'onElementDragStart', 'getReferencedVirtualElement', 'class', 'ui'))
+
+const appConfig = useAppConfig() as EditorDragHandle['AppConfig']
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorDragHandle || {}) })())
+
+const floatingUIOptions = computed(() => defu(props.options, {
+  strategy: 'absolute' as Strategy,
+  placement: 'left-start' as Placement,
+  offset: ({ rects }) => {
+    const blockHeight = rects.reference.height
+    const handleHeight = rects.floating.height
+
+    // For blocks taller than 40px, align to top (no offset)
+    if (blockHeight > 40) {
+      return {
+        alignmentAxis: 0,
+        mainAxis: 8
+      }
+    }
+
+    // For smaller blocks, center vertically
+    return {
+      alignmentAxis: (blockHeight - handleHeight) / 2,
+      mainAxis: 8
+    }
+  },
+  flip: {},
+  shift: {},
+  size: false,
+  autoPlacement: false,
+  hide: false,
+  inline: false
+} as FloatingUIOptions))
+
+const middleware = computed(() => buildFloatingUIMiddleware(floatingUIOptions.value))
+
+const computePositionConfig = computed<DragHandleProps['computePositionConfig']>(() => ({
+  placement: floatingUIOptions.value.placement,
+  strategy: floatingUIOptions.value.strategy,
+  middleware: middleware.value
+}))
+
+const currentNodePos = ref<number | null>()
+
+function onNodeChange({ pos }: { pos: number }) {
+  currentNodePos.value = pos
+}
+
+function onClick() {
+  if (!props.editor) return
+
+  const pos = currentNodePos.value
+  if (pos == null) return
+
+  const node = props.editor.state.doc.nodeAt(pos)
+  if (node) {
+    const selectedNode = { node: node.toJSON(), pos }
+
+    emit('nodeChange', selectedNode)
+
+    props.editor.chain().setNodeSelection(pos).run()
+
+    return selectedNode
+  }
+}
+</script>
+
+<template>
+  <DragHandle
+    v-bind="dragHandleProps"
+    :compute-position-config="computePositionConfig"
+    :editor="editor"
+    :on-node-change="onNodeChange"
+    data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    @click="onClick"
+  >
+    <slot :ui="ui" :on-click="onClick">
+      <UButton
+        v-bind="{
+          ...buttonProps,
+          icon: props.icon || appConfig.ui.icons.drag,
+          ...$attrs
+        }"
+        data-slot="handle"
+        :class="ui.handle({ class: [props.ui?.handle, props.class] })"
+        :ui="transformUI(ui, props.ui)"
+      />
+    </slot>
+  </DragHandle>
+</template>
diff --git a/src/runtime/components/EditorEmojiMenu.vue b/src/runtime/components/EditorEmojiMenu.vue
new file mode 100644
index 0000000000..caed77b0ce
--- /dev/null
+++ b/src/runtime/components/EditorEmojiMenu.vue
@@ -0,0 +1,103 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { EditorMenuOptions } from '../composables/useEditorMenu'
+import type { ComponentConfig } from '../types/tv'
+import theme from '#build/ui/editor-emoji-menu'
+
+type EditorEmojiMenu = ComponentConfig<typeof theme, AppConfig, 'editorEmojiMenu'>
+
+export interface EditorEmojiMenuItem {
+  name: string
+  emoji?: string
+  shortcodes: string[]
+  tags: string[]
+  group?: string
+  fallbackImage?: string
+  [key: string]: any
+}
+
+export interface EditorEmojiMenuProps<T extends EditorEmojiMenuItem = EditorEmojiMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+  items?: T[] | T[][]
+  class?: any
+  ui?: EditorEmojiMenu['slots']
+}
+</script>
+
+<script setup lang="ts" generic="T extends EditorEmojiMenuItem">
+import { computed, h, onMounted, onBeforeUnmount, nextTick, toRef } from 'vue'
+import { useAppConfig } from '#imports'
+import { useEditorMenu } from '../composables/useEditorMenu'
+import { tv } from '../utils/tv'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<EditorEmojiMenuProps<T>>(), {
+  pluginKey: 'emojiMenu',
+  char: ':',
+  filterFields: () => ['name', 'shortcodes', 'tags']
+})
+
+const appConfig = useAppConfig() as EditorEmojiMenu['AppConfig']
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorEmojiMenu || {}) })())
+
+let menu: ReturnType<typeof useEditorMenu> | null = null
+
+onMounted(async () => {
+  await nextTick()
+
+  if (!props.editor || props.editor.isDestroyed) {
+    return
+  }
+
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      if (!item.emoji) return
+
+      // Delete the trigger character and query text, then insert the emoji
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent(item.emoji)
+        .run()
+    },
+    renderItem: (item, styles) => {
+      const content = item.emoji || item.shortcodes[0] || item.name
+      return [
+        h('span', { class: styles.value.itemLeadingIcon() }, content),
+        h('span', { class: styles.value.itemWrapper() }, [
+          h('span', { class: styles.value.itemLabel() }, item.name)
+        ])
+      ]
+    }
+  })
+
+  props.editor.registerPlugin(menu.plugin)
+})
+
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy()
+    menu = null
+  }
+
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey)
+  }
+})
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/src/runtime/components/EditorMentionMenu.vue b/src/runtime/components/EditorMentionMenu.vue
new file mode 100644
index 0000000000..97932e4058
--- /dev/null
+++ b/src/runtime/components/EditorMentionMenu.vue
@@ -0,0 +1,113 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/editor-mention-menu'
+import type { EditorMenuOptions } from '../composables/useEditorMenu'
+import type { AvatarProps, IconProps } from '../types'
+import type { ComponentConfig } from '../types/tv'
+
+type EditorMentionMenu = ComponentConfig<typeof theme, AppConfig, 'editorMentionMenu'>
+
+export interface EditorMentionMenuItem {
+  label: string
+  description?: string
+  /**
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
+  avatar?: AvatarProps
+  disabled?: boolean
+  class?: any
+  [key: string]: any
+}
+
+export interface EditorMentionMenuProps<T extends EditorMentionMenuItem = EditorMentionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+  items?: T[] | T[][]
+  class?: any
+  ui?: EditorMentionMenu['slots']
+}
+</script>
+
+<script setup lang="ts" generic="T extends EditorMentionMenuItem">
+import { computed, h, onMounted, onBeforeUnmount, nextTick, toRef } from 'vue'
+import { useAppConfig } from '#imports'
+import { useEditorMenu } from '../composables/useEditorMenu'
+import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<EditorMentionMenuProps<T>>(), {
+  pluginKey: 'mentionMenu',
+  char: '@'
+})
+
+const appConfig = useAppConfig() as EditorMentionMenu['AppConfig']
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorMentionMenu || {}) })())
+
+let menu: ReturnType<typeof useEditorMenu> | null = null
+
+onMounted(async () => {
+  await nextTick()
+
+  if (!props.editor || props.editor.isDestroyed) {
+    return
+  }
+
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      // Delete the trigger character and query text, then insert the mention
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent({
+          type: 'mention',
+          attrs: item
+        })
+        .run()
+    },
+    renderItem: (item, styles) => [
+      item.avatar
+        ? h(UAvatar, { ...item.avatar, size: styles.value.itemLeadingAvatarSize(), class: styles.value.itemLeadingAvatar() })
+        : item.icon
+          ? h(UIcon, { name: item.icon, class: styles.value.itemLeadingIcon() })
+          : null,
+      h('span', { class: styles.value.itemWrapper() }, [
+        h('span', { class: styles.value.itemLabel() }, item.label),
+        item.description
+          ? h('span', { class: styles.value.itemDescription() }, item.description)
+          : null
+      ])
+    ]
+  })
+
+  props.editor.registerPlugin(menu.plugin)
+})
+
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy()
+    menu = null
+  }
+
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey)
+  }
+})
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/src/runtime/components/EditorSuggestionMenu.vue b/src/runtime/components/EditorSuggestionMenu.vue
new file mode 100644
index 0000000000..9f88d3b932
--- /dev/null
+++ b/src/runtime/components/EditorSuggestionMenu.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/editor-suggestion-menu'
+import type { EditorMenuOptions } from '../composables/useEditorMenu'
+import type { IconProps } from '../types'
+import type { EditorItem, EditorCustomHandlers } from '../types/editor'
+import type { ComponentConfig } from '../types/tv'
+
+type EditorSuggestionMenu = ComponentConfig<typeof theme, AppConfig, 'editorSuggestionMenu'>
+
+type EditorSuggestionMenuLabelItem = {
+  type: 'label'
+  label: string
+  class?: any
+  [key: string]: any
+}
+
+type EditorSuggestionMenuSeparatorItem = {
+  type: 'separator'
+  class?: any
+  [key: string]: any
+}
+
+type EditorSuggestionMenuActionItem<H extends EditorCustomHandlers = EditorCustomHandlers> = {
+  type?: never
+  label: string
+  description?: string
+  /**
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
+  disabled?: boolean
+  class?: any
+  [key: string]: any
+} & EditorItem<H>
+
+export type EditorSuggestionMenuItem<H extends EditorCustomHandlers = EditorCustomHandlers>
+  = | EditorSuggestionMenuLabelItem
+    | EditorSuggestionMenuSeparatorItem
+    | EditorSuggestionMenuActionItem<H>
+
+export interface EditorSuggestionMenuProps<T extends EditorSuggestionMenuItem = EditorSuggestionMenuItem> extends Partial<Pick<EditorMenuOptions<T>, 'editor' | 'char' | 'pluginKey' | 'filterFields' | 'limit' | 'options' | 'appendTo'>> {
+  items?: T[] | T[][]
+  class?: any
+  ui?: EditorSuggestionMenu['slots']
+}
+</script>
+
+<script setup lang="ts" generic="T extends EditorSuggestionMenuItem">
+import { computed, h, inject, onMounted, onBeforeUnmount, nextTick, toRef } from 'vue'
+import { useAppConfig } from '#imports'
+import { useEditorMenu } from '../composables/useEditorMenu'
+import { createHandlers } from '../utils/editor'
+import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<EditorSuggestionMenuProps<T>>(), {
+  pluginKey: 'suggestionMenu',
+  char: '/'
+})
+
+const appConfig = useAppConfig() as EditorSuggestionMenu['AppConfig']
+
+const handlers = inject('editorHandlers', computed(() => createHandlers()))
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorSuggestionMenu || {}) })())
+
+let menu: ReturnType<typeof useEditorMenu> | null = null
+
+onMounted(async () => {
+  await nextTick()
+
+  if (!props.editor || props.editor.isDestroyed) {
+    return
+  }
+
+  menu = useEditorMenu({
+    editor: props.editor,
+    char: props.char,
+    pluginKey: props.pluginKey,
+    items: toRef(() => props.items),
+    filterFields: props.filterFields,
+    limit: props.limit,
+    options: props.options,
+    appendTo: props.appendTo,
+    ui,
+    onSelect: (editor, range, item) => {
+      // Skip if it's a label (non-interactive)
+      if (item.type === 'label' || item.type === 'separator') return
+
+      // Delete the trigger character and query text
+      editor.chain().focus().deleteRange(range).run()
+
+      // Execute the actual command using handlers
+      const handler = handlers?.value?.[item.kind]
+      if (handler) {
+        handler.execute(editor, item).run()
+      }
+    },
+    renderItem: (item, styles) => {
+      // Render label (just text)
+      if (item.type === 'label') {
+        return [h('span', {}, item.label)]
+      }
+
+      // Render regular item
+      return [
+        item.icon
+          ? h(UIcon, { name: item.icon, class: styles.value.itemLeadingIcon() })
+          : null,
+        h('span', { class: styles.value.itemWrapper() }, [
+          h('span', { class: styles.value.itemLabel() }, item.label),
+          item.description
+            ? h('span', { class: styles.value.itemDescription() }, item.description)
+            : null
+        ])
+      ]
+    }
+  })
+
+  props.editor.registerPlugin(menu.plugin)
+})
+
+onBeforeUnmount(() => {
+  if (menu) {
+    menu.destroy()
+    menu = null
+  }
+
+  if (props.editor && !props.editor.isDestroyed) {
+    props.editor.unregisterPlugin(props.pluginKey)
+  }
+})
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/src/runtime/components/EditorToolbar.vue b/src/runtime/components/EditorToolbar.vue
new file mode 100644
index 0000000000..84d241150d
--- /dev/null
+++ b/src/runtime/components/EditorToolbar.vue
@@ -0,0 +1,369 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { Editor } from '@tiptap/vue-3'
+import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import theme from '#build/ui/editor-toolbar'
+import type { ButtonProps, DropdownMenuProps, DropdownMenuItem, TooltipProps, LinkPropsKeys } from '../types'
+import type { EditorItem, EditorCustomHandlers } from '../types/editor'
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem } from '../types/utils'
+import type { ComponentConfig } from '../types/tv'
+
+type EditorToolbar = ComponentConfig<typeof theme, AppConfig, 'editorToolbar'>
+
+type ButtonItem = Omit<ButtonProps, 'type'> & {
+  'slot'?: string
+  'tooltip'?: TooltipProps
+  'aria-label'?: string
+}
+
+type EditorToolbarButtonItem<H extends EditorCustomHandlers = EditorCustomHandlers> = Omit<ButtonItem, LinkPropsKeys> & EditorItem<H>
+
+type EditorToolbarDropdownChildItem<H extends EditorCustomHandlers = EditorCustomHandlers>
+  = | DropdownMenuItem
+    | (Omit<DropdownMenuItem, 'type'> & EditorItem<H>)
+
+type EditorToolbarDropdownItem<H extends EditorCustomHandlers = EditorCustomHandlers> = ButtonItem & DropdownMenuProps<ArrayOrNested<EditorToolbarDropdownChildItem<H>>>
+
+export type EditorToolbarItem<H extends EditorCustomHandlers = EditorCustomHandlers>
+  = | ButtonItem
+    | EditorToolbarButtonItem<H>
+    | EditorToolbarDropdownItem<H>
+
+type EditorToolbarBaseProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>> = {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The color of the toolbar controls.
+   * @defaultValue 'neutral'
+   */
+  color?: ButtonProps['color']
+  /**
+   * The variant of the toolbar controls.
+   * @defaultValue 'ghost'
+   */
+  variant?: ButtonProps['variant']
+  /**
+   * The color of the active toolbar control.
+   * @defaultValue 'primary'
+   */
+  activeColor?: ButtonProps['color']
+  /**
+   * The variant of the active toolbar control.
+   * @defaultValue 'soft'
+   */
+  activeVariant?: ButtonProps['variant']
+  /**
+   * The size of the toolbar controls.
+   * @defaultValue 'sm'
+   */
+  size?: ButtonProps['size']
+  items?: T
+  editor: Editor
+  class?: any
+  ui?: EditorToolbar['slots']
+}
+
+export type EditorToolbarProps<T extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>>
+  = | (EditorToolbarBaseProps<T> & { layout?: 'fixed' })
+    | (EditorToolbarBaseProps<T> & Partial<Omit<BubbleMenuPluginProps, 'editor' | 'element'>> & {
+      layout?: 'bubble'
+    })
+    | (EditorToolbarBaseProps<T> & Partial<Omit<FloatingMenuPluginProps, 'editor' | 'element'>> & {
+      layout?: 'floating'
+    })
+
+type SlotPropsProps = {
+  index: number
+  isActive: (item: EditorToolbarItem) => boolean
+  isDisabled: (item: EditorToolbarItem) => boolean
+  onClick: (e: MouseEvent, item: EditorToolbarItem) => void
+}
+type SlotProps<T extends EditorToolbarItem> = (props: { item: T } & SlotPropsProps) => any
+
+export type EditorToolbarSlots<
+  A extends ArrayOrNested<EditorToolbarItem> = ArrayOrNested<EditorToolbarItem>,
+  T extends NestedItem<A> = NestedItem<A>
+> = {
+  item: SlotProps<T>
+} & DynamicSlots<MergeTypes<T>, undefined, SlotPropsProps>
+
+</script>
+
+<script setup lang="ts" generic="T extends ArrayOrNested<EditorToolbarItem>">
+import { computed, inject } from 'vue'
+import { Primitive, Separator, useForwardProps } from 'reka-ui'
+import { defu } from 'defu'
+import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
+import { reactiveOmit } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { isArrayOfArray, pick, omit } from '../utils'
+import { createHandlers } from '../utils/editor'
+import { tv } from '../utils/tv'
+import UButton from './Button.vue'
+import UDropdownMenu from './DropdownMenu.vue'
+import UTooltip from './Tooltip.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<EditorToolbarProps<T>>(), {
+  layout: 'fixed',
+  color: 'neutral',
+  variant: 'ghost',
+  activeColor: 'primary',
+  activeVariant: 'soft',
+  size: 'sm'
+})
+defineSlots<EditorToolbarSlots<T>>()
+
+const appConfig = useAppConfig() as EditorToolbar['AppConfig']
+
+const handlers = inject('editorHandlers', computed(() => createHandlers()))
+
+const Component = computed(() => {
+  return ({
+    bubble: BubbleMenu,
+    floating: FloatingMenu,
+    fixed: 'template'
+  }[props.layout])
+})
+
+const rootProps = useForwardProps(reactiveOmit(props, 'as', 'color', 'variant', 'activeColor', 'activeVariant', 'size', 'items', 'layout', 'editor', 'class', 'ui'))
+
+const options = computed(() => defu((props as any).options, {
+  offset: 8,
+  shift: { padding: 8 }
+}))
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.editorToolbar || {}) })({
+  layout: props.layout
+}))
+
+const groups = computed<EditorToolbarItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
+
+function isActive(item: EditorToolbarItem): boolean {
+  if (!props.editor?.isEditable) {
+    return false
+  }
+
+  // Check for dropdown (has items property)
+  if (('items' in item) && item.items?.length) {
+    return item.items?.some((item): boolean => isActive(item as EditorToolbarItem)) || false
+  }
+
+  // Check for plain button (no kind property)
+  if (!('kind' in item)) {
+    return item.active ?? false
+  }
+
+  // Check for editor item (has kind property)
+  const handler = handlers?.value?.[item.kind]
+  return handler?.isActive(props.editor, item as any) || false
+}
+
+function isDisabled(item: EditorToolbarItem): boolean {
+  if (!props.editor?.isEditable) {
+    return true
+  }
+
+  if ('items' in item && item.items?.length) {
+    const items = isArrayOfArray(item.items) ? item.items.flat() : item.items
+    const itemItems = items.filter((item): item is EditorToolbarItem => 'kind' in item)
+
+    if (itemItems.length === 0) {
+      return true
+    }
+
+    return itemItems.every(item => isDisabled(item))
+  }
+
+  if (!('kind' in item)) {
+    return item.disabled ?? false
+  }
+
+  const handler = handlers?.value?.[item.kind]
+  if (!handler) {
+    return false
+  }
+
+  // Check item-specific disabled state
+  if (handler.isDisabled?.(props.editor, item)) {
+    return true
+  }
+
+  // Check if item can be executed
+  return !handler.canExecute(props.editor, item)
+}
+
+function onClick(e: MouseEvent, item: EditorToolbarItem) {
+  if (!props.editor?.isEditable || isDisabled(item)) {
+    return
+  }
+
+  if (('items' in item) || !('kind' in item)) {
+    if ('onClick' in item) {
+      for (const onClick of Array.isArray(item.onClick) ? item.onClick : [item.onClick]) {
+        onClick?.(e)
+      }
+    }
+    return
+  }
+
+  const handler = handlers?.value?.[item.kind]
+  if (handler) {
+    handler.execute(props.editor, item).run()
+  }
+}
+
+function getActiveChildItem(item: EditorToolbarDropdownItem): EditorToolbarItem | undefined {
+  if (!item.items) {
+    return undefined
+  }
+
+  const items = isArrayOfArray(item.items) ? item.items.flat() : item.items
+
+  return items.find((childItem: any): childItem is EditorToolbarItem => {
+    if (!('kind' in childItem)) {
+      return false
+    }
+    return isActive(childItem as EditorToolbarItem)
+  }) as EditorToolbarItem | undefined
+}
+
+function getButtonProps(item: EditorToolbarItem) {
+  const baseProps = omit(item as any, ['kind', 'mark', 'align', 'level', 'href', 'src', 'pos', 'items', 'slot', 'checkedIcon', 'loadingIcon', 'externalIcon', 'content', 'arrow', 'portal', 'modal', 'tooltip'])
+
+  // For dropdown items, use the active child's icon if available
+  if ('items' in item && item.items?.length) {
+    const activeChild = getActiveChildItem(item)
+    if (activeChild?.icon) {
+      baseProps.icon = activeChild.icon
+    }
+    if (activeChild?.label && baseProps.label !== undefined) {
+      baseProps.label = activeChild.label
+    }
+  }
+
+  return defu(baseProps, {
+    color: props.color,
+    activeColor: props.activeColor,
+    activeVariant: props.activeVariant,
+    variant: props.variant,
+    size: props.size
+  })
+}
+
+function getDropdownProps(item: EditorToolbarDropdownItem) {
+  const baseProps = pick(item as any, ['checkedIcon', 'loadingIcon', 'externalIcon', 'content', 'arrow', 'portal', 'modal', 'ui'])
+
+  return defu(baseProps, {
+    modal: false
+  })
+}
+
+function mapDropdownItem(item: EditorToolbarDropdownChildItem) {
+  // If it's a separator or label (no 'kind' property), return as is
+  if (!('kind' in item)) {
+    return item
+  }
+
+  const editorToolbarItem = item as EditorToolbarDropdownChildItem
+  return {
+    ...editorToolbarItem,
+    active: isActive(editorToolbarItem),
+    disabled: isDisabled(editorToolbarItem),
+    onClick: (e: MouseEvent) => onClick(e, editorToolbarItem)
+  }
+}
+
+function getDropdownItems(item: EditorToolbarDropdownItem) {
+  if (!item.items) {
+    return []
+  }
+
+  return isArrayOfArray(item.items)
+    ? item.items.map((group: any) => group.map(mapDropdownItem))
+    : [item.items.map(mapDropdownItem)]
+}
+</script>
+
+<template>
+  <Primitive
+    :as="Component"
+    v-bind="Component !== 'template' ? {
+      editor,
+      tabindex: -1,
+      class: ui.root({ class: props.ui?.root }),
+      ...rootProps,
+      options,
+      ...$attrs
+    } : {
+      ...$attrs
+    }"
+  >
+    <Primitive :as="as" role="toolbar" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })">
+      <template v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`">
+        <div role="group" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <slot
+              :name="((item.slot || 'item') as keyof EditorToolbarSlots<T>)"
+              :item="(item as any)"
+              :index="index"
+              :is-active="isActive"
+              :is-disabled="isDisabled"
+              :on-click="onClick"
+            >
+              <UDropdownMenu
+                v-if="('items' in item && item.items?.length)"
+                v-bind="getDropdownProps(item as EditorToolbarDropdownItem)"
+                :items="getDropdownItems(item as EditorToolbarDropdownItem)"
+              >
+                <UTooltip v-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...(item.tooltip || {}) }">
+                  <UButton :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+                </UTooltip>
+
+                <UButton v-else :active="isActive(item)" :disabled="isDisabled(item)" v-bind="getButtonProps(item)" />
+              </UDropdownMenu>
+
+              <UTooltip v-else-if="item.tooltip" :disabled="isDisabled(item)" v-bind="{ ...(item.tooltip || {}) }">
+                <UButton
+                  :active="isActive(item)"
+                  :disabled="isDisabled(item)"
+                  v-bind="getButtonProps(item)"
+                  :ui="item.ui"
+                  @click="onClick($event, item)"
+                />
+              </UTooltip>
+
+              <UButton
+                v-else
+                :active="isActive(item)"
+                :disabled="isDisabled(item)"
+                v-bind="getButtonProps(item)"
+                :ui="item.ui"
+                @click="onClick($event, item)"
+              />
+            </slot>
+          </template>
+        </div>
+
+        <Separator
+          v-if="groupIndex < groups.length - 1"
+          data-slot="separator"
+          :class="ui.separator({ class: props.ui?.separator })"
+          orientation="vertical"
+        />
+      </template>
+    </Primitive>
+  </Primitive>
+</template>
diff --git a/src/runtime/components/Pagination.vue b/src/runtime/components/Pagination.vue
index a52ad0fdce..462e33d19d 100644
--- a/src/runtime/components/Pagination.vue
+++ b/src/runtime/components/Pagination.vue
@@ -46,7 +46,6 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
   /**
    * The color of the pagination controls.
    * @defaultValue 'neutral'
-   * @IconifyIcon
    */
   color?: ButtonProps['color']
   /**
diff --git a/src/runtime/composables/useEditorMenu.ts b/src/runtime/composables/useEditorMenu.ts
new file mode 100644
index 0000000000..49bd32d36d
--- /dev/null
+++ b/src/runtime/composables/useEditorMenu.ts
@@ -0,0 +1,639 @@
+import { ref, h, computed, unref } from 'vue'
+import type { Ref, ComputedRef, MaybeRef } from 'vue'
+import { defu } from 'defu'
+import { useFilter } from 'reka-ui'
+import { computePosition } from '@floating-ui/dom'
+import type { Strategy, Placement } from '@floating-ui/dom'
+import type { Editor } from '@tiptap/vue-3'
+import { VueRenderer } from '@tiptap/vue-3'
+import type { SuggestionProps } from '@tiptap/suggestion'
+import Suggestion from '@tiptap/suggestion'
+import { PluginKey } from '@tiptap/pm/state'
+import type { FloatingUIOptions } from '../types/editor'
+import { buildFloatingUIMiddleware } from '../utils/editor'
+import { get, isArrayOfArray } from '../utils'
+
+export interface EditorMenuOptions<T = any> {
+  editor: Editor
+  /**
+   * The trigger character (e.g., '/', '@', ':')
+   */
+  char: string
+  /**
+   * Plugin key to identify this menu
+   */
+  pluginKey: string
+  /**
+   * The items to display (can be a flat array or grouped)
+   */
+  items?: MaybeRef<T[] | T[][] | undefined>
+  /**
+   * Fields to filter items by.
+   * @defaultValue ['label']
+   */
+  filterFields?: string[]
+  /**
+   * Function to filter items based on query
+   */
+  filter?: (items: T[], query: string) => T[]
+  /**
+   * Maximum number of items to display
+   * @defaultValue 42
+   */
+  limit?: number
+  /**
+   * Function to execute when an item is selected
+   */
+  onSelect: (editor: Editor, range: any, item: T) => void
+  /**
+   * Function to render each menu item
+   */
+  renderItem: (item: T, ui: ComputedRef<any>) => any
+  /**
+   * The options for positioning the menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, size, autoPlacement, hide, and inline middleware.
+   * @defaultValue { strategy: 'absolute', placement: 'bottom-start', offset: 8, shift: { padding: 8 } }
+   * @see https://floating-ui.com/docs/computePosition#options
+   */
+  options?: FloatingUIOptions
+  /**
+   * The DOM element to append the menu to. Default is the editor's parent element.
+   *
+   * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+   *
+   * @type {HTMLElement}
+   * @default editor.view.dom.parentElement
+   */
+  appendTo?: HTMLElement | (() => HTMLElement)
+  /**
+   * UI styles computed ref
+   */
+  ui: ComputedRef<any>
+}
+
+export function useEditorMenu<T = any>(options: EditorMenuOptions<T>) {
+  const filteredItems: Ref<T[]> = ref([])
+  const selectedIndex = ref(0)
+  const menuState = ref<'closed' | 'open'>('closed')
+  let renderer: VueRenderer | null = null
+  let element: HTMLElement | null = null
+  let handleMouseDown: ((e: MouseEvent) => void) | null = null
+  let commandFn: ((item: T) => void) | null = null
+  let keyDownHandler: ((props: { event: KeyboardEvent }) => boolean) | null = null
+  let globalKeyHandler: ((e: KeyboardEvent) => void) | null = null
+  let blurHandler: (() => void) | null = null
+  let triggerClientRect: (() => DOMRect | null) | null = null
+  let handleHover: ((index: number) => void) | null = null
+  let scrollHandler: (() => void) | null = null
+
+  const { contains } = useFilter({ sensitivity: 'base' })
+
+  // Helper function to cleanup menu immediately (no animation)
+  const cleanupMenu = () => {
+    if (menuState.value === 'closed') return
+
+    menuState.value = 'closed'
+
+    // Remove event listeners
+    if (globalKeyHandler) {
+      document.removeEventListener('keydown', globalKeyHandler, true)
+      globalKeyHandler = null
+    }
+    if (blurHandler) {
+      options.editor.view.dom.removeEventListener('blur', blurHandler)
+      blurHandler = null
+    }
+    if (scrollHandler) {
+      window.removeEventListener('scroll', scrollHandler, true)
+      scrollHandler = null
+    }
+
+    // Cleanup DOM immediately
+    if (element && handleMouseDown) {
+      element.removeEventListener('mousedown', handleMouseDown)
+      handleMouseDown = null
+    }
+    if (renderer) {
+      renderer.destroy()
+      renderer = null
+    }
+    if (element) {
+      element.remove()
+      element = null
+    }
+  }
+
+  const filterFields = options.filterFields ?? ['label']
+
+  const defaultFilter = (items: T[], query: string) => {
+    if (!query) return items
+
+    return items.filter((item: any) => {
+      return filterFields.some((field) => {
+        const value = get(item, field)
+        if (value === undefined || value === null) return false
+
+        const stringValue = Array.isArray(value) ? value.join(' ') : String(value)
+        return contains(stringValue, query) || contains(stringValue.replace(/[\s_-]/g, ''), query)
+      })
+    })
+  }
+
+  const filter = options.filter || defaultFilter
+  const limit = options.limit ?? 42
+
+  // Normalize items into groups first
+  const groups = computed<T[][]>(() => {
+    const items = unref(options.items)
+
+    return items?.length
+      ? isArrayOfArray(items)
+        ? items as T[][]
+        : [items as T[]]
+      : []
+  })
+
+  // Flatten groups to a single array
+  const items = computed(() => groups.value.flatMap(group => group))
+
+  // Filtered groups after applying filter (maintains group structure)
+  const filteredGroups = computed<T[][]>(() => {
+    if (!filteredItems.value.length) return []
+
+    // Map each group and filter its items
+    return groups.value
+      .map(group => group.filter(item => filteredItems.value.includes(item)))
+      .filter(group => group.length > 0)
+  })
+
+  // Get only selectable items (excluding labels and separators) for keyboard navigation
+  const selectableItems = computed<T[]>(() => {
+    return filteredItems.value.filter((item: any) => {
+      return item.type !== 'label' && item.type !== 'separator'
+    })
+  })
+
+  // Build middleware array based on options (following BubbleMenu pattern)
+  const floatingUIOptions = defu(options.options, {
+    strategy: 'absolute' as Strategy,
+    placement: 'bottom-start' as Placement,
+    offset: 8,
+    flip: {},
+    shift: { padding: 8 },
+    size: false,
+    autoPlacement: false,
+    hide: false,
+    inline: false
+  })
+
+  const middleware = buildFloatingUIMiddleware(floatingUIOptions)
+
+  // Helper function to update menu position using floating-ui
+  const updatePosition = (element: HTMLElement) => {
+    if (!triggerClientRect) return
+
+    const rect = triggerClientRect()
+    if (!rect) return
+
+    const virtualElement = {
+      getBoundingClientRect: () => rect
+    }
+
+    computePosition(virtualElement, element, {
+      placement: floatingUIOptions.placement,
+      strategy: floatingUIOptions.strategy,
+      middleware
+    }).then(({ x, y, strategy }) => {
+      element.style.width = 'max-content'
+      element.style.position = strategy
+      element.style.top = '0'
+      element.style.left = '0'
+      element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+    })
+  }
+
+  // Create the menu component using plain divs (not Reka UI components)
+  // to prevent focus stealing and allow typing to pass through to the editor
+  const MenuComponent = {
+    props: {
+      groups: { type: Array, required: true },
+      selectedIndex: { type: Number, required: true },
+      onSelect: { type: Function, required: true },
+      onHover: { type: Function, required: true },
+      state: { type: String, required: true }
+    },
+    setup(menuProps: any) {
+      function handleClick(e: MouseEvent, item: T, selectableIndex: number) {
+        e.preventDefault()
+        menuProps.onSelect(item, selectableIndex)
+      }
+
+      function handleMouseEnter(selectableIndex: number) {
+        // Update selected index on hover via callback
+        menuProps.onHover(selectableIndex)
+      }
+
+      return () => {
+        const groupsData = menuProps.groups as T[][]
+        // Build a map of selectable items to their indices
+        const selectableIndexMap = new Map<T, number>()
+        let selectableCounter = 0
+        for (const group of groupsData) {
+          for (const item of group) {
+            const itemData = item as any
+            if (itemData.type !== 'label' && itemData.type !== 'separator') {
+              selectableIndexMap.set(item, selectableCounter++)
+            }
+          }
+        }
+
+        return h('div', {
+          'class': options.ui.value.content(),
+          'role': 'listbox',
+          'data-state': menuProps.state
+        }, [
+          h('div', {
+            class: options.ui.value.viewport(),
+            role: 'presentation'
+          }, groupsData.map((group, groupIndex) =>
+            h('div', {
+              key: `group-${groupIndex}`,
+              class: options.ui.value.group(),
+              role: 'group'
+            }, group.map((item, itemInGroupIndex) => {
+              const itemData = item as any
+
+              // Render label
+              if (itemData.type === 'label') {
+                return h('div', {
+                  key: `label-${groupIndex}-${itemInGroupIndex}`,
+                  class: options.ui.value.label({ class: itemData.class })
+                }, options.renderItem(item, options.ui))
+              }
+
+              // Render separator
+              if (itemData.type === 'separator') {
+                return h('div', {
+                  key: `separator-${groupIndex}-${itemInGroupIndex}`,
+                  class: options.ui.value.separator({ class: itemData.class }),
+                  role: 'separator'
+                })
+              }
+
+              // Render regular item
+              const selectableIndex = selectableIndexMap.get(item)!
+              const isHighlighted = selectableIndex === menuProps.selectedIndex
+
+              return h('div', {
+                'key': `item-${selectableIndex}`,
+                'class': options.ui.value.item({ class: itemData.class, active: false }),
+                'role': 'option',
+                'aria-selected': isHighlighted,
+                'data-highlighted': isHighlighted ? '' : undefined,
+                'data-disabled': itemData.disabled ? '' : undefined,
+                'onMousedown': (e: MouseEvent) => handleClick(e, item, selectableIndex),
+                'onMouseenter': () => handleMouseEnter(selectableIndex),
+                'ref': (el: any) => {
+                  if (el && isHighlighted) {
+                    el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+                  }
+                }
+              }, options.renderItem(item, options.ui))
+            }))
+          ))
+        ])
+      }
+    }
+  }
+
+  // Create the suggestion plugin
+  const pluginKeyInstance = typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey
+
+  const plugin = Suggestion({
+    pluginKey: pluginKeyInstance,
+    editor: options.editor,
+    char: options.char,
+    items: ({ query }: { query: string }) => {
+      const filtered = filter(items.value, query)
+      return filtered.slice(0, limit)
+    },
+    command: ({ editor, range, props }: any) => {
+      options.onSelect(editor, range, props)
+    },
+    render: () => {
+      // Define keydown handler that will be stored and called globally
+      keyDownHandler = (props: { event: KeyboardEvent }) => {
+        const { event } = props
+
+        if (!renderer || !selectableItems.value.length) {
+          return false
+        }
+
+        // Handle Escape
+        if (event.key === 'Escape') {
+          cleanupMenu()
+          return true
+        }
+
+        // Handle ArrowUp
+        if (event.key === 'ArrowUp') {
+          selectedIndex.value = (selectedIndex.value + selectableItems.value.length - 1) % selectableItems.value.length
+          renderer?.updateProps({
+            groups: filteredGroups.value,
+            selectedIndex: selectedIndex.value,
+            onSelect: commandFn,
+            onHover: handleHover!,
+            state: menuState.value
+          })
+          return true
+        }
+
+        // Handle ArrowDown
+        if (event.key === 'ArrowDown') {
+          selectedIndex.value = (selectedIndex.value + 1) % selectableItems.value.length
+          renderer?.updateProps({
+            groups: filteredGroups.value,
+            selectedIndex: selectedIndex.value,
+            onSelect: commandFn,
+            onHover: handleHover!,
+            state: menuState.value
+          })
+          return true
+        }
+
+        // Handle Enter or Tab
+        if (event.key === 'Enter' || event.key === 'Tab') {
+          const selectedItem = selectableItems.value[selectedIndex.value]
+          if (selectedItem && commandFn) {
+            commandFn(selectedItem)
+          }
+          return true
+        }
+
+        // Let all other keys (typing) pass through to the editor
+        return false
+      }
+
+      const handlers = {
+        onStart: (suggestionProps: SuggestionProps) => {
+          filteredItems.value = suggestionProps.items as T[]
+
+          // Start at first selectable item (index 0 in selectableItems)
+          selectedIndex.value = 0
+
+          // Capture the command function for use in keyboard navigation
+          commandFn = (item: T) => suggestionProps.command(item)
+
+          // Store the trigger position (where the `/`, `@`, or `:` is)
+          triggerClientRect = suggestionProps.clientRect as () => DOMRect | null
+
+          // Only show menu if there are items
+          if (!filteredItems.value.length) {
+            return
+          }
+
+          // Set state to open for animation
+          menuState.value = 'open'
+
+          // Add global keyboard listener to capture Enter/arrows
+          globalKeyHandler = (e: KeyboardEvent) => {
+            if (keyDownHandler) {
+              const handled = keyDownHandler({ event: e })
+              if (handled) {
+                e.preventDefault()
+                e.stopPropagation()
+              }
+            }
+          }
+          document.addEventListener('keydown', globalKeyHandler, true) // Use capture phase
+
+          // Add blur listener to close menu when editor loses focus
+          blurHandler = () => {
+            // Small delay to allow clicks on menu items to be processed first
+            setTimeout(() => {
+              // Only close if still in open state (not already closing from item selection)
+              if (menuState.value === 'open') {
+                const tr = suggestionProps.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true })
+                suggestionProps.editor.view.dispatch(tr)
+              }
+            }, 0)
+          }
+          suggestionProps.editor.view.dom.addEventListener('blur', blurHandler)
+
+          // Add scroll listener to update position on scroll
+          scrollHandler = () => {
+            if (element) {
+              updatePosition(element)
+            }
+          }
+          window.addEventListener('scroll', scrollHandler, true)
+
+          // Define onHover handler that updates both state and renderer
+          handleHover = (index: number) => {
+            selectedIndex.value = index
+            // Trigger re-render with updated selectedIndex
+            if (renderer) {
+              renderer.updateProps({
+                groups: filteredGroups.value,
+                selectedIndex: index,
+                onSelect: commandFn,
+                onHover: handleHover!,
+                state: menuState.value
+              })
+            }
+          }
+
+          renderer = new VueRenderer(MenuComponent, {
+            props: {
+              groups: filteredGroups.value,
+              selectedIndex: selectedIndex.value,
+              onSelect: commandFn,
+              onHover: handleHover,
+              state: menuState.value
+            },
+            editor: suggestionProps.editor
+          })
+
+          element = document.createElement('div')
+          element.style.position = floatingUIOptions.strategy
+          element.style.zIndex = '50'
+
+          // Prevent the menu from capturing mouse down events which would steal focus
+          handleMouseDown = (e: MouseEvent) => {
+            e.preventDefault()
+          }
+          element.addEventListener('mousedown', handleMouseDown)
+
+          // Attach to appendTo or editor's parent element
+          const appendToElement = typeof options.appendTo === 'function' ? options.appendTo() : options.appendTo
+          ;(appendToElement ?? suggestionProps.editor.view.dom.parentElement)?.appendChild(element)
+          if (renderer.element) {
+            element.appendChild(renderer.element)
+          }
+
+          updatePosition(element)
+        },
+        onUpdate: (suggestionProps: SuggestionProps) => {
+          filteredItems.value = suggestionProps.items as T[]
+
+          // Update the command function
+          commandFn = (item: T) => suggestionProps.command(item)
+
+          // Reset selected index if out of bounds (comparing against selectableItems)
+          if (selectedIndex.value >= selectableItems.value.length) {
+            selectedIndex.value = Math.max(0, selectableItems.value.length - 1)
+          }
+
+          // Hide menu if no items
+          if (!filteredItems.value.length) {
+            cleanupMenu()
+            return
+          }
+
+          // Show menu if it was hidden
+          if (!renderer) {
+            // Set state to open for animation
+            menuState.value = 'open'
+
+            // Re-add global keyboard listener
+            if (!globalKeyHandler) {
+              globalKeyHandler = (e: KeyboardEvent) => {
+                if (keyDownHandler) {
+                  const handled = keyDownHandler({ event: e })
+                  if (handled) {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  }
+                }
+              }
+              document.addEventListener('keydown', globalKeyHandler, true)
+            }
+
+            // Re-add blur listener
+            if (!blurHandler) {
+              blurHandler = () => {
+                setTimeout(() => {
+                  if (menuState.value === 'open') {
+                    const tr = suggestionProps.editor.view.state.tr.setMeta(pluginKeyInstance, { exit: true })
+                    suggestionProps.editor.view.dispatch(tr)
+                  }
+                }, 0)
+              }
+              suggestionProps.editor.view.dom.addEventListener('blur', blurHandler)
+            }
+
+            // Re-add scroll listener
+            if (!scrollHandler) {
+              scrollHandler = () => {
+                if (element) {
+                  updatePosition(element)
+                }
+              }
+              window.addEventListener('scroll', scrollHandler, true)
+            }
+
+            // Define onHover handler that updates both state and renderer
+            handleHover = (index: number) => {
+              selectedIndex.value = index
+              // Trigger re-render with updated selectedIndex
+              if (renderer) {
+                renderer.updateProps({
+                  groups: filteredGroups.value,
+                  selectedIndex: index,
+                  onSelect: commandFn,
+                  onHover: handleHover!,
+                  state: menuState.value
+                })
+              }
+            }
+
+            renderer = new VueRenderer(MenuComponent, {
+              props: {
+                groups: filteredGroups.value,
+                selectedIndex: selectedIndex.value,
+                onSelect: commandFn,
+                onHover: handleHover,
+                state: menuState.value
+              },
+              editor: suggestionProps.editor
+            })
+
+            element = document.createElement('div')
+            element.style.position = floatingUIOptions.strategy
+            element.style.zIndex = '50'
+
+            // Prevent the menu from capturing mouse down events which would steal focus
+            handleMouseDown = (e: MouseEvent) => {
+              e.preventDefault()
+            }
+            element.addEventListener('mousedown', handleMouseDown)
+
+            // Attach to appendTo or editor's parent element
+            const appendToElement = typeof options.appendTo === 'function' ? options.appendTo() : options.appendTo
+            ;(appendToElement ?? suggestionProps.editor.view.dom.parentElement)?.appendChild(element)
+            if (renderer.element) {
+              element.appendChild(renderer.element)
+            }
+          } else {
+          // Update existing renderer
+            renderer.updateProps({
+              groups: filteredGroups.value,
+              selectedIndex: selectedIndex.value,
+              onSelect: commandFn,
+              onHover: (index: number) => {
+                selectedIndex.value = index
+              },
+              state: menuState.value
+            })
+          }
+
+          if (element) {
+            updatePosition(element)
+          }
+        },
+        onKeyDown: keyDownHandler!,
+        onExit: () => {
+          cleanupMenu()
+          // Clear the stored trigger position
+          triggerClientRect = null
+        }
+      }
+      return handlers
+    }
+  })
+
+  // Cleanup function for when the composable is destroyed (always runs regardless of state)
+  const destroy = () => {
+    menuState.value = 'closed'
+
+    if (globalKeyHandler) {
+      document.removeEventListener('keydown', globalKeyHandler, true)
+      globalKeyHandler = null
+    }
+    if (blurHandler) {
+      options.editor.view.dom.removeEventListener('blur', blurHandler)
+      blurHandler = null
+    }
+    if (scrollHandler) {
+      window.removeEventListener('scroll', scrollHandler, true)
+      scrollHandler = null
+    }
+    if (element && handleMouseDown) {
+      element.removeEventListener('mousedown', handleMouseDown)
+      handleMouseDown = null
+    }
+    if (renderer) {
+      renderer.destroy()
+      renderer = null
+    }
+    if (element) {
+      element.remove()
+      element = null
+    }
+  }
+
+  return {
+    plugin,
+    destroy,
+    filteredItems
+  }
+}
diff --git a/src/runtime/types/editor.ts b/src/runtime/types/editor.ts
new file mode 100644
index 0000000000..08d57f738d
--- /dev/null
+++ b/src/runtime/types/editor.ts
@@ -0,0 +1,58 @@
+import type { Editor } from '@tiptap/vue-3'
+import type { Strategy, Placement, OffsetOptions, FlipOptions, ShiftOptions, SizeOptions, AutoPlacementOptions, HideOptions, InlineOptions } from '@floating-ui/dom'
+
+export interface FloatingUIOptions {
+  strategy?: Strategy
+  placement?: Placement
+  offset?: OffsetOptions | boolean
+  flip?: FlipOptions | boolean
+  shift?: ShiftOptions | boolean
+  size?: SizeOptions | boolean
+  autoPlacement?: AutoPlacementOptions | boolean
+  hide?: HideOptions | boolean
+  inline?: InlineOptions | boolean
+}
+
+export interface EditorHandler {
+  canExecute: (editor: Editor, cmd?: any) => boolean
+  execute: (editor: Editor, cmd?: any) => any
+  isActive: (editor: Editor, cmd?: any) => boolean
+  isDisabled?: (editor: Editor, cmd?: any) => boolean
+}
+
+export type EditorCustomHandlers = Record<string, EditorHandler>
+
+export type EditorHandlers<H extends EditorCustomHandlers = EditorCustomHandlers> = {
+  mark: EditorHandler
+  textAlign: EditorHandler
+  heading: EditorHandler
+  link: EditorHandler
+  image: EditorHandler
+  blockquote: EditorHandler
+  bulletList: EditorHandler
+  orderedList: EditorHandler
+  codeBlock: EditorHandler
+  horizontalRule: EditorHandler
+  paragraph: EditorHandler
+  undo: EditorHandler
+  redo: EditorHandler
+  clearFormatting: EditorHandler
+  duplicate: EditorHandler
+  delete: EditorHandler
+  moveUp: EditorHandler
+  moveDown: EditorHandler
+  suggestion: EditorHandler
+  mention: EditorHandler
+  emoji: EditorHandler
+} & H
+
+export type EditorItem<H extends EditorCustomHandlers = EditorCustomHandlers>
+  = | { kind: 'mark', mark: 'bold' | 'italic' | 'strike' | 'code' | 'underline' }
+    | { kind: 'textAlign', align: 'left' | 'center' | 'right' | 'justify' }
+    | { kind: 'heading', level: 1 | 2 | 3 | 4 | 5 | 6 }
+    | { kind: 'link', href?: string }
+    | { kind: 'image', src?: string }
+    | { kind: 'duplicate' | 'delete' | 'moveUp' | 'moveDown', pos: number }
+    | { kind: 'clearFormatting' | 'suggestion', pos?: number }
+    | { kind: 'blockquote' | 'bulletList' | 'orderedList' | 'codeBlock' | 'horizontalRule' | 'paragraph' | 'undo' | 'redo' | 'mention' | 'emoji' }
+    | { kind: keyof H }
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 9efa713385..646694b088 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -40,6 +40,12 @@ export * from '../components/DashboardSidebarToggle.vue'
 export * from '../components/DashboardToolbar.vue'
 export * from '../components/Drawer.vue'
 export * from '../components/DropdownMenu.vue'
+export * from '../components/Editor.vue'
+export * from '../components/EditorDragHandle.vue'
+export * from '../components/EditorEmojiMenu.vue'
+export * from '../components/EditorMentionMenu.vue'
+export * from '../components/EditorSuggestionMenu.vue'
+export * from '../components/EditorToolbar.vue'
 export * from '../components/Empty.vue'
 export * from '../components/Error.vue'
 export * from '../components/FieldGroup.vue'
@@ -109,6 +115,7 @@ export * from '../components/color-mode/ColorModeSelect.vue'
 export * from '../components/color-mode/ColorModeSwitch.vue'
 export * from '../components/locale/LocaleSelect.vue'
 export * from './content'
+export * from './editor'
 export * from './form'
 export * from './locale'
 export * from './prose'
diff --git a/src/runtime/utils/editor.ts b/src/runtime/utils/editor.ts
new file mode 100644
index 0000000000..0dead1eb41
--- /dev/null
+++ b/src/runtime/utils/editor.ts
@@ -0,0 +1,472 @@
+import type { Editor, Mark } from '@tiptap/vue-3'
+import type { Middleware } from '@floating-ui/dom'
+import { flip, shift, offset, size, autoPlacement, hide, inline } from '@floating-ui/dom'
+import { isArrayOfArray } from './index'
+import type { EditorHandlers, EditorCustomHandlers, EditorItem, FloatingUIOptions } from '../types/editor'
+
+export function isMarkInSchema(mark: string | Mark, editor: Editor | null): boolean {
+  if (!editor?.schema) {
+    return false
+  }
+
+  const markName = typeof mark === 'string' ? mark : mark.name
+  return editor.schema.spec.marks.get(markName) !== undefined
+}
+
+export function isNodeTypeSelected(editor: Editor | null, nodeTypes: string[]): boolean {
+  if (!editor) {
+    return false
+  }
+
+  const { selection } = editor.state
+  const { $from, to } = selection
+
+  return nodeTypes.some((nodeType) => {
+    return editor.state.doc.nodesBetween($from.pos, to, (node) => {
+      return node.type.name === nodeType
+    })
+  })
+}
+
+export function isExtensionAvailable(editor: Editor | null, extensionName: string): boolean {
+  if (!editor) {
+    return false
+  }
+
+  return editor.extensionManager.extensions.some(ext => ext.name === extensionName)
+}
+
+export function createToggleHandler(name: string) {
+  const fnName = `toggle${name.charAt(0).toUpperCase()}${name.slice(1)}`
+  return {
+    canExecute: (editor: Editor) => (editor.can() as any)[fnName](),
+    execute: (editor: Editor) => (editor.chain().focus() as any)[fnName](),
+    isActive: (editor: Editor) => editor.isActive(name),
+    isDisabled: (editor: Editor) => isNodeTypeSelected(editor, ['image']) || editor.isActive('code')
+  }
+}
+
+export function createSetHandler(name: string) {
+  const fnName = `set${name.charAt(0).toUpperCase()}${name.slice(1)}`
+  return {
+    canExecute: (editor: Editor) => (editor.can() as any)[fnName](),
+    execute: (editor: Editor) => (editor.chain().focus() as any)[fnName](),
+    isActive: (editor: Editor) => editor.isActive(name),
+    isDisabled: (editor: Editor) => isNodeTypeSelected(editor, ['image']) || editor.isActive('code')
+  }
+}
+
+export function createSimpleHandler(name: string) {
+  return {
+    canExecute: (editor: Editor) => (editor.can() as any)[name](),
+    execute: (editor: Editor) => (editor.chain() as any)[name](),
+    isActive: () => false,
+    isDisabled: undefined
+  }
+}
+
+export function createMarkHandler() {
+  return {
+    canExecute: (editor: Editor, cmd: any) => (editor.can() as any).toggleMark(cmd.mark),
+    execute: (editor: Editor, cmd: any) => editor.chain().focus().toggleMark(cmd.mark),
+    isActive: (editor: Editor, cmd: any) => editor.isActive(cmd.mark),
+    isDisabled: (editor: Editor, cmd: any) => !isMarkInSchema(cmd.mark, editor) || isNodeTypeSelected(editor, ['image'])
+  }
+}
+
+export function createTextAlignHandler() {
+  return {
+    canExecute: (editor: Editor, cmd: any) => (editor.can() as any).setTextAlign(cmd.align),
+    execute: (editor: Editor, cmd: any) => (editor.chain().focus() as any).setTextAlign(cmd.align),
+    isActive: (editor: Editor, cmd: any) => editor.isActive({ textAlign: cmd.align }),
+    isDisabled: (editor: Editor) => !isExtensionAvailable(editor, 'textAlign') || isNodeTypeSelected(editor, ['image', 'horizontalRule'])
+  }
+}
+
+export function createHeadingHandler() {
+  return {
+    canExecute: (editor: Editor, cmd: any) => (editor.can() as any).toggleHeading({ level: cmd.level }),
+    execute: (editor: Editor, cmd: any) => editor.chain().focus().toggleHeading({ level: cmd.level }),
+    isActive: (editor: Editor, cmd: any) => editor.isActive('heading', { level: cmd.level }),
+    isDisabled: (editor: Editor) => isNodeTypeSelected(editor, ['image']) || editor.isActive('code')
+  }
+}
+
+export function createLinkHandler() {
+  return {
+    canExecute: (editor: Editor) => {
+      // Can execute if we can set a link or unset a link
+      return (editor.can() as any).setLink({ href: '' }) || (editor.can() as any).unsetLink()
+    },
+    execute: (editor: Editor, cmd: any) => {
+      const chain = editor.chain()
+      const previousUrl = editor.getAttributes('link').href
+
+      // If link is already active, unset it
+      if (previousUrl) {
+        return chain.focus().unsetLink()
+      }
+
+      // If href is provided in cmd, use it
+      if (cmd?.href) {
+        return chain.focus().setLink({ href: cmd.href })
+      }
+
+      // Otherwise prompt for URL
+      const href = prompt('Enter the URL:')
+      if (href) {
+        return chain.focus().setLink({ href })
+      }
+
+      return chain
+    },
+    isActive: (editor: Editor) => editor.isActive('link'),
+    isDisabled: (editor: Editor) => {
+      if (!isExtensionAvailable(editor, 'link') || isNodeTypeSelected(editor, ['image'])) {
+        return true
+      }
+      // Disable if no text is selected and no link is active
+      const { selection } = editor.state
+      return selection.empty && !editor.isActive('link')
+    }
+  }
+}
+
+export function createImageHandler() {
+  return {
+    canExecute: (editor: Editor) => {
+      return (editor.can() as any).setImage({ src: '' })
+    },
+    execute: (editor: Editor, cmd: any) => {
+      const chain = editor.chain().focus()
+
+      // If src is provided in cmd, use it
+      if (cmd?.src) {
+        return chain.setImage({ src: cmd.src })
+      }
+
+      // Otherwise prompt for URL
+      const src = prompt('Enter the image URL:')
+      if (src) {
+        return chain.setImage({ src })
+      }
+
+      return chain
+    },
+    isActive: (editor: Editor) => editor.isActive('image'),
+    isDisabled: (editor: Editor) => {
+      return !isExtensionAvailable(editor, 'image')
+    }
+  }
+}
+
+export function createListHandler(listType: 'bulletList' | 'orderedList') {
+  const fnName = listType === 'bulletList' ? 'toggleBulletList' : 'toggleOrderedList'
+
+  return {
+    canExecute: (editor: Editor) => {
+      return (editor.can() as any)[fnName]() || editor.isActive('bulletList') || editor.isActive('orderedList')
+    },
+    execute: (editor: Editor) => {
+      const { state } = editor
+      const { selection } = state
+      let chain = editor.chain().focus()
+
+      // Handle NodeSelection (e.g., from drag handle)
+      if ((selection as any).node) {
+        const node = (selection as any).node
+        const firstChild = node.firstChild?.firstChild
+        const lastChild = node.lastChild?.lastChild
+
+        const from = firstChild
+          ? selection.from + firstChild.nodeSize
+          : selection.from + 1
+        const to = lastChild
+          ? selection.to - lastChild.nodeSize
+          : selection.to - 1
+
+        chain = chain.setTextSelection({ from, to }).clearNodes()
+      }
+
+      if (editor.isActive(listType)) {
+        // Unwrap list
+        return chain
+          .liftListItem('listItem')
+          .lift('bulletList')
+          .lift('orderedList')
+          .selectTextblockEnd()
+      }
+
+      // Wrap in list and normalize selection
+      return (chain as any)[fnName]().selectTextblockEnd()
+    },
+    isActive: (editor: Editor) => editor.isActive(listType),
+    isDisabled: (editor: Editor) => isNodeTypeSelected(editor, ['image']) || editor.isActive('code')
+  }
+}
+
+export function createMoveHandler(direction: 'up' | 'down') {
+  return {
+    canExecute: (editor: Editor, cmd: any) => {
+      if (cmd?.pos == null) return false
+      const node = editor.state.doc.nodeAt(cmd.pos)
+      if (!node) return false
+      const $pos = editor.state.doc.resolve(cmd.pos)
+      const parent = $pos.parent
+      const index = $pos.index()
+      return direction === 'up' ? index > 0 : index < parent.childCount - 1
+    },
+    execute: (editor: Editor, cmd: any) => {
+      if (cmd?.pos == null) return editor.chain()
+      const node = editor.state.doc.nodeAt(cmd.pos)
+      if (!node) return editor.chain()
+
+      const $pos = editor.state.doc.resolve(cmd.pos)
+      const parent = $pos.parent
+      const index = $pos.index()
+
+      if (direction === 'up' && index > 0) {
+        const prevNode = parent.child(index - 1)
+        const targetPos = cmd.pos - prevNode.nodeSize
+        return editor.chain().focus()
+          .deleteRange({ from: cmd.pos, to: cmd.pos + node.nodeSize })
+          .insertContentAt(targetPos, node.toJSON())
+      }
+
+      if (direction === 'down' && index < parent.childCount - 1) {
+        const nextNode = parent.child(index + 1)
+        const targetPos = cmd.pos + nextNode.nodeSize
+        return editor.chain().focus()
+          .deleteRange({ from: cmd.pos, to: cmd.pos + node.nodeSize })
+          .insertContentAt(targetPos, node.toJSON())
+      }
+
+      return editor.chain()
+    },
+    isActive: () => false,
+    isDisabled: undefined
+  }
+}
+
+export function createHandlers(): EditorHandlers {
+  return {
+    mark: createMarkHandler(),
+    textAlign: createTextAlignHandler(),
+    heading: createHeadingHandler(),
+    link: createLinkHandler(),
+    image: createImageHandler(),
+    blockquote: createToggleHandler('blockquote'),
+    bulletList: createListHandler('bulletList'),
+    orderedList: createListHandler('orderedList'),
+    codeBlock: createToggleHandler('codeBlock'),
+    horizontalRule: createSetHandler('horizontalRule'),
+    paragraph: createSetHandler('paragraph'),
+    undo: createSimpleHandler('undo'),
+    redo: createSimpleHandler('redo'),
+    clearFormatting: {
+      canExecute: (editor: Editor, cmd: any) => {
+        if (cmd?.pos != null) {
+          const node = editor.state.doc.nodeAt(cmd.pos)
+          return !!node
+        }
+        return editor.can().clearNodes() || editor.can().unsetAllMarks()
+      },
+      execute: (editor: Editor, cmd: any) => {
+        // If position is provided (from drag handle), select the node content first
+        if (cmd?.pos != null) {
+          const node = editor.state.doc.nodeAt(cmd.pos)
+          if (!node) return editor.chain()
+
+          const from = cmd.pos + 1
+          const to = cmd.pos + node.nodeSize - 1
+
+          return editor.chain()
+            .focus()
+            .setTextSelection({ from, to })
+            .clearNodes()
+            .unsetAllMarks()
+        }
+
+        // Otherwise, clear formatting on current selection
+        return editor.chain().focus().clearNodes().unsetAllMarks()
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    },
+    duplicate: {
+      canExecute: (editor: Editor, cmd: any) => {
+        if (cmd?.pos == null) return false
+        const node = editor.state.doc.nodeAt(cmd.pos)
+        return !!node
+      },
+      execute: (editor: Editor, cmd: any) => {
+        if (cmd?.pos == null) return editor.chain()
+        const node = editor.state.doc.nodeAt(cmd.pos)
+        if (!node) return editor.chain()
+        return editor.chain().focus().insertContentAt(cmd.pos + node.nodeSize, node.toJSON())
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    },
+    delete: {
+      canExecute: (editor: Editor, cmd: any) => {
+        if (cmd?.pos == null) return false
+        const node = editor.state.doc.nodeAt(cmd.pos)
+        return !!node
+      },
+      execute: (editor: Editor, cmd: any) => {
+        if (cmd?.pos == null) return editor.chain()
+        const node = editor.state.doc.nodeAt(cmd.pos)
+        if (!node) return editor.chain()
+        return editor.chain().focus().deleteRange({ from: cmd.pos, to: cmd.pos + node.nodeSize })
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    },
+    moveUp: createMoveHandler('up'),
+    moveDown: createMoveHandler('down'),
+    suggestion: {
+      canExecute: () => true,
+      execute: (editor: Editor, cmd?: any) => {
+        const { state } = editor
+        const { selection } = state
+        const { $from } = selection
+
+        if (cmd?.pos !== undefined) {
+          // When triggered from drag handle, insert after the current node
+          const node = state.doc.nodeAt(cmd.pos)
+          if (node) {
+            const insertPos = cmd.pos + node.nodeSize
+            return editor.chain().focus().insertContentAt(insertPos, { type: 'paragraph', content: [{ type: 'text', text: '/' }] })
+          }
+        }
+
+        // When triggered from toolbar/elsewhere, insert new paragraph after current block
+        const currentNode = $from.node($from.depth)
+        const currentNodePos = $from.before($from.depth)
+        const insertPos = currentNodePos + currentNode.nodeSize
+
+        return editor.chain().focus().insertContentAt(insertPos, { type: 'paragraph', content: [{ type: 'text', text: '/' }] })
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    },
+    mention: {
+      canExecute: () => true,
+      execute: (editor: Editor) => {
+        const { state } = editor
+        const { selection } = state
+        const { $from } = selection
+
+        // Check if there's text before the cursor
+        const textBefore = $from.parent.textBetween(Math.max(0, $from.parentOffset - 1), $from.parentOffset, undefined, ' ')
+        const needsSpace = textBefore && textBefore !== ' '
+
+        return editor.chain().focus().insertContent(needsSpace ? ' @' : '@')
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    },
+    emoji: {
+      canExecute: () => true,
+      execute: (editor: Editor) => {
+        const { state } = editor
+        const { selection } = state
+        const { $from } = selection
+
+        // Check if there's text before the cursor
+        const textBefore = $from.parent.textBetween(Math.max(0, $from.parentOffset - 1), $from.parentOffset, undefined, ' ')
+        const needsSpace = textBefore && textBefore !== ' '
+
+        return editor.chain().focus().insertContent(needsSpace ? ' :' : ':')
+      },
+      isActive: () => false,
+      isDisabled: undefined
+    }
+  }
+}
+
+export function mapEditorItems(
+  editor: Editor,
+  items: (Partial<EditorItem> & Record<string, any>)[] | (Partial<EditorItem> & Record<string, any>)[][],
+  customHandlers?: EditorCustomHandlers
+): any[] | any[][] {
+  const handlers = { ...createHandlers(), ...customHandlers }
+
+  // Handle nested arrays [[...], [...]]
+  if (isArrayOfArray(items)) {
+    return items.map(group =>
+      mapEditorItems(editor, group, customHandlers)
+    ) as any[][]
+  }
+
+  return items.filter(Boolean).map((item) => {
+    // Pass through items with type (label, separator, etc)
+    if ('type' in item) {
+      return item
+    }
+
+    const { kind, children, ...rest } = item
+
+    // Recursively process children if present
+    const processedChildren = children?.length
+      ? mapEditorItems(editor, children as any, customHandlers) as any[]
+      : undefined
+
+    // Handle action items with handlers
+    if (kind) {
+      const handler = handlers[kind]
+      if (!handler) {
+        return {
+          ...rest,
+          children: processedChildren
+        }
+      }
+
+      return {
+        ...rest,
+        children: processedChildren,
+        disabled: handler.isDisabled?.(editor, item) || !handler.canExecute(editor, item),
+        active: handler.isActive(editor, item),
+        onSelect: () => handler.execute(editor, item).run()
+      }
+    }
+
+    // Pass through items without kind but with children
+    return { ...rest, children: processedChildren }
+  })
+}
+
+export function buildFloatingUIMiddleware(options: FloatingUIOptions): Middleware[] {
+  const middleware: Middleware[] = []
+
+  if (options.offset) {
+    middleware.push(offset(typeof options.offset !== 'boolean' ? options.offset : undefined))
+  }
+
+  if (options.flip) {
+    middleware.push(flip(typeof options.flip !== 'boolean' ? options.flip : undefined))
+  }
+
+  if (options.shift) {
+    middleware.push(shift(typeof options.shift !== 'boolean' ? options.shift : undefined))
+  }
+
+  if (options.size) {
+    middleware.push(size(typeof options.size !== 'boolean' ? options.size : undefined))
+  }
+
+  if (options.autoPlacement) {
+    middleware.push(autoPlacement(typeof options.autoPlacement !== 'boolean' ? options.autoPlacement : undefined))
+  }
+
+  if (options.hide) {
+    middleware.push(hide(typeof options.hide !== 'boolean' ? options.hide : undefined))
+  }
+
+  if (options.inline) {
+    middleware.push(inline(typeof options.inline !== 'boolean' ? options.inline : undefined))
+  }
+
+  return middleware
+}
diff --git a/src/theme/editor-drag-handle.ts b/src/theme/editor-drag-handle.ts
new file mode 100644
index 0000000000..d4032a52b9
--- /dev/null
+++ b/src/theme/editor-drag-handle.ts
@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    root: 'hidden sm:flex items-center justify-center transition-all duration-200 ease-out',
+    handle: 'cursor-grab px-1'
+  }
+}
diff --git a/src/theme/editor-emoji-menu.ts b/src/theme/editor-emoji-menu.ts
new file mode 100644
index 0000000000..55baf41516
--- /dev/null
+++ b/src/theme/editor-emoji-menu.ts
@@ -0,0 +1,4 @@
+import type { ModuleOptions } from '../module'
+import editorSuggestionMenu from './editor-suggestion-menu'
+
+export default (options: Required<ModuleOptions>) => editorSuggestionMenu(options)
diff --git a/src/theme/editor-mention-menu.ts b/src/theme/editor-mention-menu.ts
new file mode 100644
index 0000000000..55baf41516
--- /dev/null
+++ b/src/theme/editor-mention-menu.ts
@@ -0,0 +1,4 @@
+import type { ModuleOptions } from '../module'
+import editorSuggestionMenu from './editor-suggestion-menu'
+
+export default (options: Required<ModuleOptions>) => editorSuggestionMenu(options)
diff --git a/src/theme/editor-suggestion-menu.ts b/src/theme/editor-suggestion-menu.ts
new file mode 100644
index 0000000000..7e6fd5d1a6
--- /dev/null
+++ b/src/theme/editor-suggestion-menu.ts
@@ -0,0 +1,31 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    content: 'min-w-48 max-w-60 max-h-96 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col',
+    viewport: 'relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1',
+    group: 'p-1 isolate',
+    label: 'w-full flex items-center font-semibold text-highlighted p-1.5 text-xs gap-1.5',
+    separator: '-mx-1 my-1 h-px bg-border',
+    item: 'group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 p-1.5 text-sm gap-1.5',
+    itemLeadingIcon: 'shrink-0 size-5 flex items-center justify-center text-base',
+    itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '2xs',
+    itemWrapper: 'flex-1 flex flex-col text-start min-w-0',
+    itemLabel: 'truncate',
+    itemDescription: 'truncate text-muted',
+    itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed'
+  },
+  variants: {
+    active: {
+      true: {
+        item: 'text-highlighted before:bg-elevated/75',
+        itemLeadingIcon: 'text-default'
+      },
+      false: {
+        item: ['text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-dimmed group-data-highlighted:not-group-data-disabled:text-default', options.theme.transitions && 'transition-colors']
+      }
+    }
+  }
+})
diff --git a/src/theme/editor-toolbar.ts b/src/theme/editor-toolbar.ts
new file mode 100644
index 0000000000..3a4d955f03
--- /dev/null
+++ b/src/theme/editor-toolbar.ts
@@ -0,0 +1,21 @@
+export default {
+  slots: {
+    root: 'focus:outline-none',
+    base: 'flex items-stretch gap-1.5',
+    group: 'flex items-center gap-0.5',
+    separator: 'w-px self-stretch bg-border'
+  },
+  variants: {
+    layout: {
+      bubble: {
+        base: 'bg-default border border-default rounded-lg p-1'
+      },
+      floating: {
+        base: 'bg-default border border-default rounded-lg p-1'
+      },
+      fixed: {
+        base: ''
+      }
+    }
+  }
+}
diff --git a/src/theme/editor.ts b/src/theme/editor.ts
new file mode 100644
index 0000000000..9f75d5be48
--- /dev/null
+++ b/src/theme/editor.ts
@@ -0,0 +1,50 @@
+import type { NuxtOptions } from '@nuxt/schema'
+
+export default (options: Required<NuxtOptions['ui']>) => ({
+  slots: {
+    root: '',
+    content: 'relative size-full flex-1',
+    base: [
+      'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
+      // Placeholder
+      '[&_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none',
+      '[&_li_.is-empty]:before:content-none',
+      // Paragraph
+      '[&_p]:leading-7',
+      // Links
+      '[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium',
+      options.theme?.transitions && '[&_a]:transition-colors',
+      // Mentions
+      '[&_.mention]:text-primary [&_.mention]:font-medium',
+      // Headings - shared styles
+      '[&_:is(h1,h2,h3,h4)]:text-highlighted [&_:is(h1,h2,h3,h4)]:font-bold',
+      // Headings - unique styles
+      '[&_h1]:text-3xl',
+      '[&_h2]:text-2xl',
+      '[&_h3]:text-xl',
+      '[&_h4]:text-lg',
+      // Code inside headings
+      '[&_:is(h1,h2,h3,h4)>code]:border-dashed [&_:is(h1,h2,h3,h4)>code]:font-bold',
+      '[&_h2>code]:text-xl/6',
+      '[&_h3>code]:text-lg/5',
+      // Blockquote & HR
+      '[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic',
+      '[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2',
+      '[&_hr]:border-t [&_hr]:border-default',
+      // Code blocks
+      '[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto',
+      '[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent',
+      // Inline code
+      '[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted',
+      // Lists
+      '[&_:is(ul,ol)]:ps-6',
+      '[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)',
+      '[&_ol]:list-decimal [&_ol]:marker:text-muted',
+      '[&_li]:my-1.5 [&_li]:ps-1.5',
+      // Images
+      '[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary',
+      // Selected nodes
+      '[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20'
+    ]
+  }
+})
diff --git a/src/theme/icons.ts b/src/theme/icons.ts
index c7b39c27bd..1fa5a2197d 100644
--- a/src/theme/icons.ts
+++ b/src/theme/icons.ts
@@ -15,6 +15,7 @@ export default {
   copy: 'i-lucide-copy',
   copyCheck: 'i-lucide-copy-check',
   dark: 'i-lucide-moon',
+  drag: 'i-lucide-grip-vertical',
   ellipsis: 'i-lucide-ellipsis',
   error: 'i-lucide-circle-x',
   external: 'i-lucide-arrow-up-right',
diff --git a/src/theme/index.ts b/src/theme/index.ts
index aa4bdc8969..5fbc3c1e46 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -39,6 +39,12 @@ export { default as dashboardSidebarToggle } from './dashboard-sidebar-toggle'
 export { default as dashboardToolbar } from './dashboard-toolbar'
 export { default as drawer } from './drawer'
 export { default as dropdownMenu } from './dropdown-menu'
+export { default as editor } from './editor'
+export { default as editorDragHandle } from './editor-drag-handle'
+export { default as editorEmojiMenu } from './editor-emoji-menu'
+export { default as editorMentionMenu } from './editor-mention-menu'
+export { default as editorSuggestionMenu } from './editor-suggestion-menu'
+export { default as editorToolbar } from './editor-toolbar'
 export { default as empty } from './empty'
 export { default as error } from './error'
 export { default as fieldGroup } from './field-group'
diff --git a/test/components/Editor.spec.ts b/test/components/Editor.spec.ts
new file mode 100644
index 0000000000..9cf69f5c6a
--- /dev/null
+++ b/test/components/Editor.spec.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import Editor from '../../src/runtime/components/Editor.vue'
+import type { EditorProps, EditorSlots } from '../../src/runtime/components/Editor.vue'
+import ComponentRender from '../component-render'
+
+describe('Editor', () => {
+  const props = {}
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: 'min-h-80' } }],
+    ['with ui', { props: { ui: { base: 'sm:px-14' } } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: EditorProps, slots?: Partial<EditorSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Editor)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(Editor, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+
+    wrapper.unmount()
+  })
+})
diff --git a/test/components/EditorDragHandle.spec.ts b/test/components/EditorDragHandle.spec.ts
new file mode 100644
index 0000000000..f86cf98bdd
--- /dev/null
+++ b/test/components/EditorDragHandle.spec.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest'
+import { axe } from 'vitest-axe'
+import type { Editor } from '@tiptap/vue-3'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import EditorDragHandle from '../../src/runtime/components/EditorDragHandle.vue'
+import type { EditorDragHandleProps, EditorDragHandleSlots } from '../../src/runtime/components/EditorDragHandle.vue'
+import ComponentRender from '../component-render'
+
+describe('EditorDragHandle', () => {
+  const props = { editor: { registerPlugin: vi.fn() } as unknown as Editor }
+
+  it.each([
+    // Props
+    ['with as', { props: { ...props, as: 'section' } }],
+    ['with class', { props: { ...props, class: 'items-start' } }],
+    ['with ui', { props: { ...props, ui: { handle: 'px-4' } } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: EditorDragHandleProps, slots?: Partial<EditorDragHandleSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, EditorDragHandle)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(EditorDragHandle, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+})
diff --git a/test/components/EditorToolbar.spec.ts b/test/components/EditorToolbar.spec.ts
new file mode 100644
index 0000000000..a56b0ecc2a
--- /dev/null
+++ b/test/components/EditorToolbar.spec.ts
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { Editor } from '@tiptap/vue-3'
+import EditorToolbar from '../../src/runtime/components/EditorToolbar.vue'
+import type { EditorToolbarProps, EditorToolbarSlots } from '../../src/runtime/components/EditorToolbar.vue'
+import ComponentRender from '../component-render'
+
+describe('EditorToolbar', () => {
+  const items = [[{
+    'icon': 'i-lucide-heading',
+    'aria-label': 'Headings',
+    'content': {
+      align: 'start'
+    },
+    'items': [{
+      kind: 'heading',
+      level: 1,
+      icon: 'i-lucide-heading-1',
+      label: 'Heading 1'
+    }, {
+      kind: 'heading',
+      level: 2,
+      icon: 'i-lucide-heading-2',
+      label: 'Heading 2'
+    }, {
+      kind: 'heading',
+      level: 3,
+      icon: 'i-lucide-heading-3',
+      label: 'Heading 3'
+    }, {
+      kind: 'heading',
+      level: 4,
+      icon: 'i-lucide-heading-4',
+      label: 'Heading 4'
+    }]
+  }], [{
+    'kind': 'mark',
+    'mark': 'bold',
+    'icon': 'i-lucide-bold',
+    'aria-label': 'Bold'
+  }, {
+    'kind': 'mark',
+    'mark': 'italic',
+    'icon': 'i-lucide-italic',
+    'aria-label': 'Italic'
+  }, {
+    'kind': 'mark',
+    'mark': 'underline',
+    'icon': 'i-lucide-underline',
+    'aria-label': 'Underline'
+  }, {
+    'kind': 'mark',
+    'mark': 'strike',
+    'icon': 'i-lucide-strikethrough',
+    'aria-label': 'Strikethrough'
+  }, {
+    'kind': 'mark',
+    'mark': 'code',
+    'icon': 'i-lucide-code',
+    'aria-label': 'Code'
+  }]]
+  const props = { editor: { registerPlugin: vi.fn() } as unknown as Editor, items }
+
+  it.each([
+    // Props
+    ['with as', { props: { ...props, as: 'section' } }],
+    ['with layout bubble', { props: { ...props, layout: 'bubble' as const } }],
+    ['with layout floating', { props: { ...props, layout: 'floating' as const } }],
+    ['with class', { props: { ...props, class: 'overflow-x-auto' } }],
+    ['with ui', { props: { ...props, ui: { separator: 'bg-default' } } }],
+    // Slots
+    ['with item slot', { props, slots: { item: () => 'Item slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: EditorToolbarProps, slots?: Partial<EditorToolbarSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, EditorToolbar)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(EditorToolbar, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+})
diff --git a/test/components/__snapshots__/Accordion-vue.spec.ts.snap b/test/components/__snapshots__/Accordion-vue.spec.ts.snap
index 3391ab3911..507150afc8 100644
--- a/test/components/__snapshots__/Accordion-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Accordion-vue.spec.ts.snap
@@ -92,7 +92,7 @@ exports[`Accordion > renders with body slot correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Body slot</div>
     </div>
   </div>
@@ -215,7 +215,7 @@ exports[`Accordion > renders with content slot correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">Content slot</div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">Content slot</div>
   </div>
   <div data-state="closed" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="closed" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-4" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Theming</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
@@ -278,7 +278,7 @@ exports[`Accordion > renders with custom body slot correctly 1`] = `
   </div>
   <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">
       <div data-slot="body" class="text-sm pb-3.5">Custom body slot</div>
     </div>
   </div>
@@ -319,7 +319,7 @@ exports[`Accordion > renders with custom slot correctly 1`] = `
   </div>
   <div data-state="open" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" id="reka-accordion-trigger-v-10" data-reka-collection-item="" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Utilities</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">Custom slot</div>
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-10" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-11">Custom slot</div>
   </div>
 </div>"
 `;
@@ -334,7 +334,7 @@ exports[`Accordion > renders with default slot correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Default slot</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
@@ -375,7 +375,7 @@ exports[`Accordion > renders with defaultValue correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
@@ -539,7 +539,7 @@ exports[`Accordion > renders with leading slot correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75">Leading slot<span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
@@ -580,7 +580,7 @@ exports[`Accordion > renders with modelValue correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
@@ -621,7 +621,7 @@ exports[`Accordion > renders with trailing slot correctly 1`] = `
   </div>
   <div data-state="open" data-disabled="" data-orientation="vertical" data-slot="item" class="border-b border-default last:border-b-0">
     <div data-orientation="vertical" data-state="open" data-disabled="" data-slot="header" class="flex"><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-disabled="" disabled="" id="reka-accordion-trigger-v-2" data-reka-collection-item="" aria-disabled="true" data-orientation="vertical" data-slot="trigger" class="group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0 cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="text-start break-words">Installation</span>Trailing slot</button></div>
-    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
+    <div role="region" aria-labelledby="reka-accordion-trigger-v-2" data-disabled="" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;" data-slot="content" class="data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none" id="reka-collapsible-content-v-3">
       <div data-slot="body" class="text-sm pb-3.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.</div>
     </div>
   </div>
diff --git a/test/components/__snapshots__/Editor-vue.spec.ts.snap b/test/components/__snapshots__/Editor-vue.spec.ts.snap
new file mode 100644
index 0000000000..7f12530ff5
--- /dev/null
+++ b/test/components/__snapshots__/Editor-vue.spec.ts.snap
@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Editor > renders with as correctly 1`] = `
+"<section data-slot="root" class="">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</section>"
+`;
+
+exports[`Editor > renders with class correctly 1`] = `
+"<div data-slot="root" class="min-h-80">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Editor > renders with default slot correctly 1`] = `
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Editor > renders with ui correctly 1`] = `
+"<div data-slot="root" class="">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 sm:px-14" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
diff --git a/test/components/__snapshots__/Editor.spec.ts.snap b/test/components/__snapshots__/Editor.spec.ts.snap
new file mode 100644
index 0000000000..7f12530ff5
--- /dev/null
+++ b/test/components/__snapshots__/Editor.spec.ts.snap
@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Editor > renders with as correctly 1`] = `
+"<section data-slot="root" class="">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</section>"
+`;
+
+exports[`Editor > renders with class correctly 1`] = `
+"<div data-slot="root" class="min-h-80">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Editor > renders with default slot correctly 1`] = `
+"<div data-slot="root" class="">Default slot<div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Editor > renders with ui correctly 1`] = `
+"<div data-slot="root" class="">
+  <div role="presentation" data-slot="content" class="relative size-full flex-1">
+    <div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" translate="no" class="tiptap ProseMirror w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 selection:bg-primary/20 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&amp;_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none [&amp;_li_.is-empty]:before:content-none [&amp;_p]:leading-7 [&amp;_a]:text-primary [&amp;_a]:border-b [&amp;_a]:border-transparent [&amp;_a]:hover:border-primary [&amp;_a]:font-medium [&amp;_a]:transition-colors [&amp;_.mention]:text-primary [&amp;_.mention]:font-medium [&amp;_:is(h1,h2,h3,h4)]:text-highlighted [&amp;_:is(h1,h2,h3,h4)]:font-bold [&amp;_h1]:text-3xl [&amp;_h2]:text-2xl [&amp;_h3]:text-xl [&amp;_h4]:text-lg [&amp;_:is(h1,h2,h3,h4)>code]:border-dashed [&amp;_:is(h1,h2,h3,h4)>code]:font-bold [&amp;_h2>code]:text-xl/6 [&amp;_h3>code]:text-lg/5 [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-accented [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_[data-type=horizontalRule]]:my-8 [&amp;_[data-type=horizontalRule]]:py-2 [&amp;_hr]:border-t [&amp;_hr]:border-default [&amp;_pre]:text-sm/6 [&amp;_pre]:border [&amp;_pre]:border-muted [&amp;_pre]:bg-muted [&amp;_pre]:rounded-md [&amp;_pre]:px-4 [&amp;_pre]:py-3 [&amp;_pre]:whitespace-pre-wrap [&amp;_pre]:break-words [&amp;_pre]:overflow-x-auto [&amp;_pre_code]:p-0 [&amp;_pre_code]:text-inherit [&amp;_pre_code]:font-inherit [&amp;_pre_code]:rounded-none [&amp;_pre_code]:inline [&amp;_pre_code]:border-0 [&amp;_pre_code]:bg-transparent [&amp;_code]:px-1.5 [&amp;_code]:py-0.5 [&amp;_code]:text-sm [&amp;_code]:font-mono [&amp;_code]:font-medium [&amp;_code]:rounded-md [&amp;_code]:inline-block [&amp;_code]:border [&amp;_code]:border-muted [&amp;_code]:text-highlighted [&amp;_code]:bg-muted [&amp;_:is(ul,ol)]:ps-6 [&amp;_ul]:list-disc [&amp;_ul]:marker:text-(--ui-border-accented) [&amp;_ol]:list-decimal [&amp;_ol]:marker:text-muted [&amp;_li]:my-1.5 [&amp;_li]:ps-1.5 [&amp;_img]:rounded-md [&amp;_img]:block [&amp;_img]:max-w-full [&amp;_img.ProseMirror-selectednode]:outline-2 [&amp;_img.ProseMirror-selectednode]:outline-primary [&amp;_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20 sm:px-14" tabindex="0">
+      <p><br class="ProseMirror-trailingBreak"></p>
+    </div>
+  </div>
+</div>"
+`;
diff --git a/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
new file mode 100644
index 0000000000..77033ad24a
--- /dev/null
+++ b/test/components/__snapshots__/EditorDragHandle-vue.spec.ts.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorDragHandle > renders with as correctly 1`] = `
+"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root">
+  <section data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <!--v-if-->
+    <!--v-if-->
+  </section>
+</div>"
+`;
+
+exports[`EditorDragHandle > renders with class correctly 1`] = `
+"<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="visibility: hidden; position: absolute;" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`EditorDragHandle > renders with default slot correctly 1`] = `"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root">Default slot</div>"`;
+
+exports[`EditorDragHandle > renders with ui correctly 1`] = `
+"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
diff --git a/test/components/__snapshots__/EditorDragHandle.spec.ts.snap b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
new file mode 100644
index 0000000000..f30dc1cf7a
--- /dev/null
+++ b/test/components/__snapshots__/EditorDragHandle.spec.ts.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorDragHandle > renders with as correctly 1`] = `
+"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root">
+  <section data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
+    <!--v-if-->
+  </section>
+</div>"
+`;
+
+exports[`EditorDragHandle > renders with class correctly 1`] = `
+"<div class="hidden sm:flex justify-center transition-all duration-200 ease-out items-start" style="visibility: hidden; position: absolute;" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-1 items-start"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`EditorDragHandle > renders with default slot correctly 1`] = `"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root">Default slot</div>"`;
+
+exports[`EditorDragHandle > renders with ui correctly 1`] = `
+"<div class="hidden sm:flex items-center justify-center transition-all duration-200 ease-out" style="visibility: hidden; position: absolute;" data-slot="root"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 cursor-grab px-4"><span class="iconify i-lucide:grip-vertical shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
diff --git a/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
new file mode 100644
index 0000000000..08289fc347
--- /dev/null
+++ b/test/components/__snapshots__/EditorToolbar-vue.spec.ts.snap
@@ -0,0 +1,169 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorToolbar > renders with as correctly 1`] = `
+"<section role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</section>"
+`;
+
+exports[`EditorToolbar > renders with class correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 overflow-x-auto">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`EditorToolbar > renders with item slot correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5">Item slot</div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5">Item slotItem slotItem slotItem slotItem slot</div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
+"<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
+  <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+      <!---->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+    <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`EditorToolbar > renders with layout floating correctly 1`] = `
+"<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
+  <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+      <!---->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+    <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+        <!--v-if-->
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`EditorToolbar > renders with ui correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-default"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/EditorToolbar.spec.ts.snap b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
new file mode 100644
index 0000000000..03be30ad0b
--- /dev/null
+++ b/test/components/__snapshots__/EditorToolbar.spec.ts.snap
@@ -0,0 +1,169 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EditorToolbar > renders with as correctly 1`] = `
+"<section role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</section>"
+`;
+
+exports[`EditorToolbar > renders with class correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 overflow-x-auto">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`EditorToolbar > renders with item slot correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5">Item slot</div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5">Item slotItem slotItem slotItem slotItem slot</div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`EditorToolbar > renders with layout bubble correctly 1`] = `
+"<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
+  <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+      <!---->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+    <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`EditorToolbar > renders with layout floating correctly 1`] = `
+"<div tabindex="-1" class="focus:outline-none" style="visibility: hidden; position: absolute;">
+  <div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5 bg-default border border-default rounded-lg p-1">
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button>
+      <!---->
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+    <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-border"></div>
+    <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+        <!--v-if-->
+        <!--v-if-->
+      </button></div>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`EditorToolbar > renders with ui correctly 1`] = `
+"<div role="toolbar" data-slot="base" class="flex items-stretch gap-1.5">
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" aria-label="Headings" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:heading shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!---->
+    <!--teleport start-->
+    <!--teleport end-->
+  </div>
+  <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="w-px self-stretch bg-default"></div>
+  <div role="group" data-slot="group" class="flex items-center gap-0.5"><button type="button" disabled="" aria-label="Bold" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:bold shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Italic" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:italic shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Underline" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:underline shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Strikethrough" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:strikethrough shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Code" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:code shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
index f99d76c76f..9bc43e5b89 100644
--- a/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputMenu-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputMenu > renders with ariaLabel correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" aria-label="Aria label" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -10,7 +10,7 @@ exports[`InputMenu > renders with ariaLabel correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -37,7 +37,7 @@ exports[`InputMenu > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with arrow correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -46,7 +46,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -72,7 +72,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with as correctly 1`] = `
-"<section dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<section dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -81,7 +81,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -132,7 +132,7 @@ exports[`InputMenu > renders with avatar correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with class correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="inline-flex items-center absolute" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -141,7 +141,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -168,7 +168,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -177,7 +177,7 @@ exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -213,7 +213,7 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with defaultValue correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -222,9 +222,21 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
         </div>
         <!--v-if-->
       </div>
@@ -237,7 +249,7 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with descriptionKey correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -246,7 +258,7 @@ exports[`InputMenu > renders with descriptionKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -317,7 +329,7 @@ exports[`InputMenu > renders with icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with id correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -326,7 +338,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -353,7 +365,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -362,7 +374,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
@@ -379,7 +391,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-description slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -388,7 +400,7 @@ exports[`InputMenu > renders with item-description slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
@@ -405,7 +417,7 @@ exports[`InputMenu > renders with item-description slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-label slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -414,7 +426,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
@@ -441,7 +453,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-leading slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -450,7 +462,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -477,7 +489,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -486,7 +498,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -513,7 +525,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -522,7 +534,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -549,7 +561,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with items with description correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -558,7 +570,7 @@ exports[`InputMenu > renders with items with description correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
@@ -575,7 +587,7 @@ exports[`InputMenu > renders with items with description correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with labelKey correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -584,7 +596,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
@@ -676,7 +688,7 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with modelValue correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="Backlog" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -685,9 +697,21 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
+          <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
+          <div id="reka-combobox-item-v-11" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Canceled</span>
+            <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+          </div>
         </div>
         <!--v-if-->
       </div>
@@ -702,7 +726,7 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
 exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
 "<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
   <div dir="ltr" data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" data-slot="tagsItemText" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tagsItemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div>
-  <div data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" data-slot="tagsItemText" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tagsItemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
+  <div data-slot="tagsItem" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" data-slot="tagsItemText" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" data-slot="tagsItemDelete" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="tagsItemDeleteIcon" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-5">
   <!--v-if-->
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
 </div>
@@ -715,7 +739,7 @@ exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
       <div role="group" aria-labelledby="" id="reka-combobox-group-v-3" data-slot="group" class="p-1 isolate">
-        <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+        <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
         </div>
         <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -743,7 +767,7 @@ exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with multiple correctly 1`] = `
-"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
+"<div dir="ltr" data-slot="base" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" data-slot="tagsInput" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if-->
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
 </div>
@@ -756,7 +780,7 @@ exports[`InputMenu > renders with multiple correctly 1`] = `
     <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
       <!--v-if-->
       <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-        <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+        <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
           <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
         </div>
         <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -784,7 +808,7 @@ exports[`InputMenu > renders with multiple correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with name correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -793,7 +817,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -820,7 +844,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -829,7 +853,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -856,7 +880,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant none correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -865,7 +889,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -892,7 +916,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -901,7 +925,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -928,7 +952,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -937,7 +961,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -964,7 +988,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -973,7 +997,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1000,7 +1024,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with placeholder correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" placeholder="Search..." value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1009,7 +1033,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1036,7 +1060,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1045,7 +1069,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1072,7 +1096,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant none correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1081,7 +1105,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1108,7 +1132,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant outline correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1117,7 +1141,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1144,7 +1168,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant soft correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1153,7 +1177,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1180,7 +1204,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1189,7 +1213,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1216,7 +1240,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with required correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" required="" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1225,7 +1249,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1252,7 +1276,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with selectedIcon correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1261,7 +1285,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1288,7 +1312,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size lg correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-10" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1297,7 +1321,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1324,7 +1348,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size md correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1333,7 +1357,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1360,7 +1384,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size sm correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-8" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1369,7 +1393,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1396,7 +1420,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xl correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-11" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-6"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1405,7 +1429,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1432,7 +1456,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with size xs correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-7" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-4"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1441,7 +1465,7 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1495,7 +1519,7 @@ exports[`InputMenu > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with trailingIcon correctly 2`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1504,7 +1528,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1531,7 +1555,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
 `;
 
 exports[`InputMenu > renders with ui correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1540,7 +1564,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="isolate p-2">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1567,7 +1591,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with valueKey correctly 1`] = `
-"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" data-slot="root" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" data-slot="base" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" data-slot="trailing" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
@@ -1576,7 +1600,7 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
diff --git a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
index d1680e94bb..893f5c6697 100644
--- a/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -18,7 +18,7 @@ exports[`SelectMenu > renders with ariaLabel correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -56,7 +56,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -64,7 +64,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -122,7 +122,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -130,7 +130,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -168,7 +168,7 @@ exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="New value">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="New value" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -176,7 +176,7 @@ exports[`SelectMenu > renders with create-item-label slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span data-slot="itemLabel" class="truncate">Create item slot</span></div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span data-slot="itemLabel" class="truncate">Create item slot</span></div>
         </div>
       </div>
     </div>
@@ -199,7 +199,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -207,7 +207,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -245,7 +245,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -253,7 +253,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -291,7 +291,7 @@ exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -299,7 +299,7 @@ exports[`SelectMenu > renders with descriptionKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -390,7 +390,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -398,7 +398,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -436,7 +436,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -444,7 +444,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
@@ -472,7 +472,7 @@ exports[`SelectMenu > renders with item-description slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -480,7 +480,7 @@ exports[`SelectMenu > renders with item-description slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
@@ -508,7 +508,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -516,7 +516,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
@@ -554,7 +554,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -562,7 +562,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -600,7 +600,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -608,7 +608,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -646,7 +646,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -654,7 +654,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -692,7 +692,7 @@ exports[`SelectMenu > renders with items with description correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -700,7 +700,7 @@ exports[`SelectMenu > renders with items with description correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-7" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">In Progress</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
           <div id="reka-combobox-item-v-9" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Done</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
@@ -728,7 +728,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -736,7 +736,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">todo</span>
@@ -779,7 +779,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -787,7 +787,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -869,7 +869,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -877,7 +877,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -915,7 +915,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -923,7 +923,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -961,7 +961,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -969,7 +969,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1007,7 +1007,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1015,7 +1015,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1053,7 +1053,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1061,7 +1061,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1099,7 +1099,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1107,7 +1107,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1145,7 +1145,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1153,7 +1153,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1191,7 +1191,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1199,7 +1199,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1237,7 +1237,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1245,7 +1245,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1283,7 +1283,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1291,7 +1291,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1329,7 +1329,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1337,7 +1337,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1375,7 +1375,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1383,7 +1383,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1421,7 +1421,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1429,7 +1429,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1467,7 +1467,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1475,7 +1475,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1513,7 +1513,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1521,7 +1521,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1559,7 +1559,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1567,7 +1567,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1605,14 +1605,14 @@ exports[`SelectMenu > renders with searchInput icon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value=""><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3"><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
         <!--v-if-->
       </div>
       <!--v-if-->
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1650,7 +1650,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter items..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1658,7 +1658,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1696,7 +1696,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1704,7 +1704,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1742,7 +1742,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1750,7 +1750,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1788,7 +1788,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1796,7 +1796,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1834,7 +1834,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1842,7 +1842,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1880,7 +1880,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1888,7 +1888,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1926,7 +1926,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1934,7 +1934,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -1981,7 +1981,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -1989,7 +1989,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -2036,7 +2036,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -2044,7 +2044,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -2082,7 +2082,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -2090,7 +2090,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="isolate p-2">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
@@ -2128,7 +2128,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
 <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
   <div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" data-slot="content" class="max-h-60 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto flex flex-col origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
     <div tabindex="-1" data-slot="focusScope" class="flex flex-col min-h-0">
-      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="">
+      <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" autocomplete="off" aria-disabled="false" aria-expanded="true" aria-controls="reka-combobox-content-v-0" aria-autocomplete="list" role="combobox" value="" aria-activedescendant="reka-combobox-item-v-3">
         <!--v-if-->
         <!--v-if-->
       </div>
@@ -2136,7 +2136,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
       <div role="presentation" data-slot="viewport" class="relative scroll-py-1 overflow-y-auto flex-1 divide-y divide-default">
         <!--v-if-->
         <div role="group" aria-labelledby="" id="reka-combobox-group-v-1" data-slot="group" class="p-1 isolate">
-          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
+          <div id="reka-combobox-item-v-3" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Backlog</span>
             <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
           </div>
           <div id="reka-combobox-item-v-5" data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Todo</span>
diff --git a/test/utils/mount.ts b/test/utils/mount.ts
index bccfeb9921..8d714c8d77 100644
--- a/test/utils/mount.ts
+++ b/test/utils/mount.ts
@@ -10,7 +10,7 @@ const router = createRouter({
   routes: [{ path: '/', component: { template: '<div>Home</div>' } }]
 })
 
-export function mountSuspended(...args: Parameters<typeof mount>) {
+export async function mountSuspended(...args: Parameters<typeof mount>) {
   let setupState = {}
   const comp = args[0] as any
   if (comp.setup) {
@@ -29,6 +29,8 @@ export function mountSuspended(...args: Parameters<typeof mount>) {
     }
   }))
 
+  await wrapper.vm.$nextTick()
+
   // @ts-expect-error - setupState does not exist in type
   wrapper.setupState = setupState