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

Merge branch 'v3' into pr/1945

Browse Source
This commit is contained in:
Benjamin Canac
2025-07-16 21:52:54 +02:00
parent 01c8f3bf5e 8b42365bf4
commit d12160927e
16 changed files with 870 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.nuxtrc Normal file
View File

@@ -0,0 +1 @@
experimental.normalizeComponentNames=false

2
docs/app/composables/useFaviconFromTheme.ts
View File

@@ -1,5 +1,5 @@
import { onMounted, watch } from 'vue'
import FaviconSvg from 'public/icon.svg?raw'
import FaviconSvg from '../../public/icon.svg?raw'
export function useFaviconFromTheme() {
const colorMode = useColorMode()

2
docs/package.json
View File

@@ -30,7 +30,7 @@
"joi": "^17.13.3",
"maska": "^3.2.0",
"motion-v": "^1.5.0",
"nuxt": "^3.17.7",
"nuxt": "^4.0.0",
"nuxt-component-meta": "^0.12.1",
"nuxt-llms": "^0.1.3",
"nuxt-og-image": "^5.1.9",

6
package.json
View File

@@ -116,8 +116,8 @@
"@internationalized/number": "^3.6.3",
"@nuxt/fonts": "^0.11.4",
"@nuxt/icon": "^1.15.0",
"@nuxt/kit": "^3.17.7",
"@nuxt/schema": "^3.17.7",
"@nuxt/kit": "^4.0.0",
"@nuxt/schema": "^4.0.0",
"@nuxtjs/color-mode": "^3.5.2",
"@standard-schema/spec": "^1.0.0",
"@tailwindcss/postcss": "^4.1.11",
@@ -163,7 +163,7 @@
"embla-carousel": "^8.6.0",
"eslint": "^9.31.0",
"happy-dom": "^18.0.1",
"nuxt": "^3.17.7",
"nuxt": "^4.0.0",
"release-it": "^19.0.3",
"vitest": "^3.2.4",
"vitest-environment-nuxt": "^1.0.1",

4
playground-vue/package.json
View File

@@ -16,9 +16,9 @@
"zod": "^4.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.4",
"@vitejs/plugin-vue": "^6.0.0",
"typescript": "^5.8.3",
"vite": "^6.3.5",
"vite": "^7.0.4",
"vue-tsc": "^3.0.1"
}
}

2
playground/package.json
View File

@@ -14,7 +14,7 @@
"@internationalized/date": "^3.8.2",
"@nuxt/ui": "workspace:*",
"@nuxthub/core": "^0.9.0",
"nuxt": "^3.17.7",
"nuxt": "^4.0.0",
"zod": "^4.0.5"
},
"devDependencies": {

1440
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

14
src/runtime/components/InputMenu.vue
View File

@@ -171,7 +171,7 @@ export interface InputMenuSlots<
</script>
<script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
import { computed, ref, toRef, onMounted, toRaw } from 'vue'
import { computed, ref, toRef, onMounted, toRaw, nextTick } from 'vue'
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
import { defu } from 'defu'
import { isEqual } from 'ohash/utils'
@@ -233,11 +233,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputMenu ||
}))
function displayValue(value: T): string {
if (!props.valueKey) {
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
}
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
}
@@ -305,6 +301,10 @@ function autoFocus() {
}
onMounted(() => {
nextTick(() => {
searchTerm.value = ''
})
setTimeout(() => {
autoFocus()
}, props.autofocusDelay)
@@ -439,7 +439,7 @@ defineExpose({
<TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
<TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
<slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
{{ displayValue(item as T) }}
{{ displayValue(item as T) ?? item }}
</slot>
</TagsInputItemText>

6
src/runtime/components/SelectMenu.vue
View File

@@ -234,11 +234,7 @@ function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): strin
return values?.length ? values.join(', ') : undefined
}
if (!props.valueKey) {
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
}
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
}

33
src/runtime/components/Table.vue
View File

@@ -49,6 +49,13 @@ declare module '@tanstack/table-core' {
th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
}
colspan?: {
td?: string | ((cell: Cell<TData, TValue>) => string)
}
rowspan?: {
td?: string | ((cell: Cell<TData, TValue>) => string)
}
}
interface TableMeta<TData> {
@@ -376,6 +383,14 @@ function onRowContextmenu(e: Event, row: TableRow<T>) {
}
}
function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined {
if (typeof prop === 'function') {
// @ts-expect-error: TS can't know if prop is a function here
return prop(arg)
}
return prop
}
watch(
() => props.data, () => {
data.value = props.data ? [...props.data] : []
@@ -405,10 +420,11 @@ defineExpose({
:data-pinned="header.column.getIsPinned()"
:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
:rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
:class="ui.th({
class: [
props.ui?.th,
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
resolveValue(header.column.columnDef.meta?.class?.th, header)
],
pinned: !!header.column.getIsPinned()
})"
@@ -436,10 +452,10 @@ defineExpose({
:class="ui.tr({
class: [
props.ui?.tr,
typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
resolveValue(tableApi.options.meta?.class?.tr, row)
]
})"
:style="typeof tableApi.options.meta?.style?.tr === 'function' ? tableApi.options.meta?.style?.tr(row) : tableApi.options.meta?.style?.tr"
:style="resolveValue(tableApi.options.meta?.style?.tr, row)"
@click="onRowSelect($event, row)"
@pointerenter="onRowHover($event, row)"
@pointerleave="onRowHover($event, null)"
@@ -449,14 +465,16 @@ defineExpose({
v-for="cell in row.getVisibleCells()"
:key="cell.id"
:data-pinned="cell.column.getIsPinned()"
:colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
:rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
:class="ui.td({
class: [
props.ui?.td,
typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
resolveValue(cell.column.columnDef.meta?.class?.td, cell)
],
pinned: !!cell.column.getIsPinned()
})"
:style="typeof cell.column.columnDef.meta?.style?.td === 'function' ? cell.column.columnDef.meta.style.td(cell) : cell.column.columnDef.meta?.style?.td"
:style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
>
<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
@@ -497,14 +515,15 @@ defineExpose({
:key="header.id"
:data-pinned="header.column.getIsPinned()"
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
:rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
:class="ui.th({
class: [
props.ui?.th,
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
resolveValue(header.column.columnDef.meta?.class?.th, header)
],
pinned: !!header.column.getIsPinned()
})"
:style="typeof header.column.columnDef.meta?.style?.th === 'function' ? header.column.columnDef.meta.style.th(header) : header.column.columnDef.meta?.style?.th"
:style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
>
<slot :name="`${header.id}-footer`" v-bind="header.getContext()">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />

2
test/components/CheckboxGroup.spec.ts
View File

@@ -120,7 +120,7 @@ describe('CheckboxGroup', () => {
test('no label for=... on FormField', async () => {
const { wrapper } = await createForm()
const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes(':'))[0]
expect(formFieldLabel.for).toBeUndefined()
expect(formFieldLabel?.for).toBeUndefined()
})
})
})

6
test/components/CommandPalette.spec.ts
View File

@@ -68,15 +68,15 @@ describe('CommandPalette', () => {
// Props
['with groups', { props }],
['without data', {}],
['with modelValue', { props: { ...props, modelValue: groups[2].items[0] } }],
['with defaultValue', { props: { ...props, defaultValue: groups[2].items[0] } }],
['with modelValue', { props: { ...props, modelValue: groups[2]?.items[0] } }],
['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items[0] } }],
['with labelKey', { props: { ...props, labelKey: 'icon' } }],
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
['with disabled', { props: { ...props, disabled: true } }],
['with icon', { props: { ...props, icon: 'i-lucide-terminal' } }],
['with loading', { props: { ...props, loading: true } }],
['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-lucide-loader' } }],
['with selectedIcon', { props: { ...props, selectedIcon: 'i-lucide-badge-check', modelValue: groups[2].items[0] } }],
['with selectedIcon', { props: { ...props, selectedIcon: 'i-lucide-badge-check', modelValue: groups[2]?.items[0] } }],
['with close', { props: { ...props, close: true } }],
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-lucide-trash' } }],
['with as', { props: { ...props, as: 'section' } }],

16
test/components/Form.spec.ts
View File

@@ -314,8 +314,8 @@ describe('Form', () => {
emailInput.trigger('focus')
await flushPromises()
expect(mockWatchCallback).toHaveBeenCalledTimes(1)
expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
})
test('reactivity: touchedFields works on change', async () => {
@@ -327,8 +327,8 @@ describe('Form', () => {
emailInput.trigger('change')
await flushPromises()
expect(mockWatchCallback).toHaveBeenCalledTimes(1)
expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
})
test('reactivity: blurredFields works', async () => {
@@ -340,8 +340,8 @@ describe('Form', () => {
emailInput.trigger('blur')
await flushPromises()
expect(mockWatchCallback).toHaveBeenCalledTimes(1)
expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
})
test('reactivity: dirtyFields works', async () => {
@@ -352,8 +352,8 @@ describe('Form', () => {
emailInput.trigger('change')
await flushPromises()
expect(mockWatchCallback).toHaveBeenCalledTimes(1)
expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
})
test('reactivity: dirty works', async () => {

2
test/components/FormField.spec.ts
View File

@@ -18,7 +18,6 @@ import {
USlider,
UPinInput,
UFormField
} from '#components'
const inputComponents = [UInput, URadioGroup, UTextarea, UCheckbox, USelect, USelectMenu, UInputMenu, UInputNumber, USwitch, USlider, UPinInput]
@@ -111,7 +110,6 @@ describe('FormField', () => {
props: { label: 'Label' },
inputComponent
})
const label = wrapper.find('label[for=v-0-0]')
expect(label.exists()).toBe(true)

2
test/components/RadioGroup.spec.ts
View File

@@ -122,7 +122,7 @@ describe('RadioGroup', () => {
test('no label for=... on FormField', async () => {
const { wrapper } = await createForm()
const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes('Option'))[0]
expect(formFieldLabel.for).toBeUndefined()
expect(formFieldLabel?.for).toBeUndefined()
})
})
})

23
test/components/__snapshots__/InputMenu.spec.ts.snap
View File

@@ -129,16 +129,21 @@ exports[`InputMenu > renders with class correctly 1`] = `
exports[`InputMenu > renders with create-item-label slot correctly 1`] = `
"<div dir="ltr" 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="false" 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-0-0-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" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--teleport start-->
<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;" class="max-h-60 w-(--reka-combobox-trigger-width) 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-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
<!---->
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
<!--v-if-->
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
<div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="truncate">Create item slot</span></div>
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-5" class="p-1 isolate">
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-13" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-15" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
@@ -159,7 +164,7 @@ exports[`InputMenu > renders with default slot correctly 1`] = `
exports[`InputMenu > renders with defaultValue correctly 1`] = `
"<div dir="ltr" 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="false" 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-0-0-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" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--teleport start-->
<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;" class="max-h-60 w-(--reka-combobox-trigger-width) 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-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
@@ -168,6 +173,10 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
<!--v-if-->
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
<div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
</div>
<!--v-if-->
</div>
@@ -462,7 +471,7 @@ exports[`InputMenu > renders with loadingIcon correctly 1`] = `
exports[`InputMenu > renders with modelValue correctly 1`] = `
"<div dir="ltr" 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="false" 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-0-0-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" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="reka-combobox-content-v-0-0-0" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
<!--teleport start-->
<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;" class="max-h-60 w-(--reka-combobox-trigger-width) 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-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
@@ -471,6 +480,10 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
<!--v-if-->
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
<div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-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 class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
</div>
<!--v-if-->
</div>