@brumaombra/ui-vintage 0.7.13 → 0.8.1

package/src/components/ui/combobox/ComboboxEmpty.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxEmpty } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('animate-uv-fade-up px-3 py-6 text-center text-xs font-semibold text-muted-foreground sm:text-sm', props.class)">
+        <slot>{{ t('uiVintage.combobox.empty') }}</slot>
+    </ComboboxEmpty>
+</template>

package/src/components/ui/combobox/ComboboxGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<ComboboxGroupProps & {
+    class?: HTMLAttributes['class'];
+    heading?: string;
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'heading');
+</script>
+
+<template>
+    <ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('overflow-hidden', props.class)">
+        <!-- Heading -->
+        <ComboboxLabel v-if="props.heading || $slots.heading" data-slot="combobox-group-heading" class="px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none">
+            <slot name="heading">{{ props.heading }}</slot>
+        </ComboboxLabel>
+
+        <slot />
+    </ComboboxGroup>
+</template>

package/src/components/ui/combobox/ComboboxInput.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+// Props
+const props = defineProps<ComboboxInputProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<ComboboxInputEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxInput data-slot="combobox-input" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+        'h-9 min-w-16 flex-1 truncate bg-transparent font-semibold text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+        props.class
+    )
+        " />
+</template>

package/src/components/ui/combobox/ComboboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxItem data-slot="combobox-item" v-bind="forwarded" :class="cn(
+        'relative flex w-full cursor-pointer items-center gap-3 rounded py-2 pr-9 pl-3 text-left text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
+        'data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+    )
+        ">
+        <slot />
+
+        <!-- Trailing check indicator (pops in when selected) -->
+        <span class="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
+            <ComboboxItemIndicator>
+                <slot name="indicator-icon">
+                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+                </slot>
+            </ComboboxItemIndicator>
+        </span>
+    </ComboboxItem>
+</template>

package/src/components/ui/combobox/ComboboxList.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+// Props
+const props = withDefaults(defineProps<ComboboxContentProps & {
+    class?: HTMLAttributes['class'];
+    viewportClass?: HTMLAttributes['class'];
+}>(), {
+    position: 'popper',
+    align: 'start',
+    sideOffset: 6,
+    collisionPadding: 8
+});
+
+// Emits
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'viewportClass');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxPortal>
+        <ComboboxContent data-slot="combobox-list" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+            'uv-floating-motion bg-popover text-popover-foreground z-50 flex w-(--reka-combobox-trigger-width) max-h-[min(var(--reka-combobox-content-available-height),20rem)] flex-col overflow-hidden rounded border border-border shadow-elevated-lg outline-hidden',
+            props.class
+        )
+            ">
+            <!-- Scrollable viewport -->
+            <ComboboxViewport data-slot="combobox-viewport" :class="cn('min-h-0 scroll-py-1 p-1', props.viewportClass)">
+                <slot />
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>

package/src/components/ui/combobox/ComboboxSelect.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { Cancel01Icon, Search01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { SelectItemContent } from '../select';
+import Combobox from './Combobox.vue';
+import ComboboxAnchor from './ComboboxAnchor.vue';
+import ComboboxEmpty from './ComboboxEmpty.vue';
+import ComboboxInput from './ComboboxInput.vue';
+import ComboboxItem from './ComboboxItem.vue';
+import ComboboxList from './ComboboxList.vue';
+import ComboboxTrigger from './ComboboxTrigger.vue';
+import type { ComboboxSelectModelValue, ComboboxSelectOption, ComboboxSelectValue } from './types';
+
+// Props
+const props = withDefaults(defineProps<{
+    modelValue?: ComboboxSelectModelValue;
+    options: ComboboxSelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'default';
+    class?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+}>(), {
+    modelValue: undefined,
+    multiple: false,
+    disabled: false,
+    size: 'default'
+});
+
+// Emits
+const emits = defineEmits<{
+    'update:modelValue': [value: ComboboxSelectModelValue];
+}>();
+
+const { t } = useI18n();
+
+const open = ref(false);
+const searchTerm = ref('');
+
+// Only animate the leading icon swap after the first interaction (no pop on page load)
+const interacted = ref(false);
+
+// Localized fallbacks, overridable via props
+const placeholderText = computed(() => props.placeholder ?? t('uiVintage.combobox.placeholder'));
+const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t('uiVintage.combobox.searchPlaceholder'));
+const emptyLabel = computed(() => props.emptyText ?? t('uiVintage.combobox.empty'));
+
+// Normalized selection
+const selectedValues = computed<ComboboxSelectValue[]>(() => {
+    if (Array.isArray(props.modelValue)) return props.modelValue;
+    return props.modelValue == null ? [] : [props.modelValue];
+});
+
+// Lookup options by value
+const optionMap = computed(() => new Map(props.options.map(option => [option.value, option])));
+
+const selectedOptions = computed(() => selectedValues.value
+    .map(value => optionMap.value.get(value))
+    .filter((option): option is ComboboxSelectOption => !!option));
+
+const selectedOption = computed(() => (props.multiple ? undefined : selectedOptions.value[0]));
+
+// Value handed to reka (array in multiple mode)
+const rootValue = computed<AcceptableValue | AcceptableValue[] | undefined>(() => {
+    if (props.multiple) return selectedValues.value;
+    return selectedValues.value[0];
+});
+
+// Label shown inside the input for single selection
+const displayValue = (value: unknown) => {
+    if (props.multiple || value == null || Array.isArray(value)) return '';
+    return optionMap.value.get(value as ComboboxSelectValue)?.label ?? '';
+};
+
+// Placeholder switches to a search prompt (or the current label) while open
+const inputPlaceholder = computed(() => {
+    if (props.multiple) {
+        if (open.value || selectedOptions.value.length) return searchPlaceholderText.value;
+        return placeholderText.value;
+    }
+    if (open.value) return selectedOption.value?.label ?? searchPlaceholderText.value;
+    return placeholderText.value;
+});
+
+// Leading icon mirrors the selected option icon when closed
+const showsOptionIcon = computed(() => !open.value && !!selectedOption.value?.icon);
+const leadingIcon = computed(() => (showsOptionIcon.value && selectedOption.value?.icon) || Search01Icon);
+
+const handleUpdate = (value: unknown) => {
+    if (props.multiple) {
+        emits('update:modelValue', Array.isArray(value) ? [...value] as ComboboxSelectValue[] : []);
+        return;
+    }
+    emits('update:modelValue', (value ?? null) as ComboboxSelectModelValue);
+};
+
+// Clear the text on open so the whole list is visible (single mode keeps the label as placeholder)
+const handleOpenChange = (value: boolean) => {
+    open.value = value;
+    interacted.value = true;
+    if (value) searchTerm.value = '';
+};
+
+// Remove a tag in multiple mode
+const removeValue = (value: ComboboxSelectValue) => {
+    if (props.disabled) return;
+    emits('update:modelValue', selectedValues.value.filter(item => item !== value));
+};
+
+// Backspace on an empty input removes the last tag
+const handleKeydown = (event: KeyboardEvent) => {
+    if (!props.multiple || event.key !== 'Backspace' || searchTerm.value) return;
+    const last = selectedValues.value[selectedValues.value.length - 1];
+    if (last !== undefined) removeValue(last);
+};
+</script>
+
+<template>
+    <Combobox :model-value="rootValue" :multiple="props.multiple" :disabled="props.disabled" :open="open" data-slot="combobox-select" :class="cn('w-full', props.class)" @update:model-value="handleUpdate" @update:open="handleOpenChange">
+        <!-- Field -->
+        <ComboboxAnchor :size="props.size" :class="props.multiple && selectedOptions.length ? 'py-2' : undefined">
+            <!-- Leading icon -->
+            <HugeiconsIcon :key="showsOptionIcon ? `option-${selectedOption?.value}` : 'search'" :icon="leadingIcon" :class="cn('size-4', interacted && 'animate-uv-pop')" />
+
+            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+                <!-- Selected tags (multiple mode) -->
+                <TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
+                    <span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
+                        <HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
+                        <span class="truncate">{{ option.label }}</span>
+                        <button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
+                            <HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
+                        </button>
+                    </span>
+                </TransitionGroup>
+
+                <!-- Search input -->
+                <ComboboxInput v-model="searchTerm" :display-value="displayValue" :placeholder="inputPlaceholder" :disabled="props.disabled" @keydown="handleKeydown" />
+            </div>
+
+            <!-- Chevron trigger -->
+            <ComboboxTrigger />
+        </ComboboxAnchor>
+
+        <!-- Options list -->
+        <ComboboxList :class="props.contentClass">
+            <ComboboxEmpty>{{ emptyLabel }}</ComboboxEmpty>
+
+            <ComboboxItem v-for="option in props.options" :key="option.value" :value="option.value" :text-value="option.label" :disabled="option.disabled">
+                <SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
+            </ComboboxItem>
+        </ComboboxList>
+    </Combobox>
+</template>

package/src/components/ui/combobox/ComboboxSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxSeparator } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>

package/src/components/ui/combobox/ComboboxTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { ComboboxTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
+        'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
+        props.class
+    )
+        ">
+        <slot>
+            <!-- Chevron rotates with a spring while open -->
+            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-current transition-transform duration-300 ease-spring group-data-[state=open]/combobox-trigger:rotate-180" />
+        </slot>
+    </ComboboxTrigger>
+</template>

package/src/components/ui/combobox/index.ts

@@ -0,0 +1,11 @@
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue';
+export { default as ComboboxGroup } from './ComboboxGroup.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxList } from './ComboboxList.vue';
+export { default as ComboboxSelect } from './ComboboxSelect.vue';
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
+export type { ComboboxSelectModelValue, ComboboxSelectOption, ComboboxSelectValue } from './types';

package/src/components/ui/combobox/types.ts

@@ -0,0 +1,16 @@
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
+
+// Primitive value held by a ComboboxSelect option
+export type ComboboxSelectValue = string | number;
+
+// Option rendered by ComboboxSelect
+export interface ComboboxSelectOption {
+    value: ComboboxSelectValue;
+    label: string;
+    description?: string;
+    icon?: HugeiconsIconDefinition;
+    disabled?: boolean;
+}
+
+// v-model shape of ComboboxSelect (array when `multiple`)
+export type ComboboxSelectModelValue = ComboboxSelectValue | ComboboxSelectValue[] | null | undefined;

package/src/components/ui/command/CommandDialog.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
 import { useForwardPropsEmits } from 'reka-ui';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '../dialog';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '../dialog';
 import Command from './Command.vue';
 
 // Props
-const props = withDefaults(defineProps<DialogRootProps & {
+const props = defineProps<DialogRootProps & {
     title?: string;
     description?: string;
-}>(), {
-    title: 'Command Palette',
-    description: 'Search for a command to run...'
-});
+    contentClass?: HTMLAttributes['class'];
+}>();
+
+const { t } = useI18n();
+const resolvedTitle = computed(() => props.title || t('uiVintage.commandDialog.title'));
+const resolvedDescription = computed(() => props.description || t('uiVintage.commandDialog.description'));
 
 // Emits
 const emits = defineEmits<DialogRootEmits>();
 
 // Forward props
-const forwarded = useForwardPropsEmits(props, emits);
+const delegatedProps = reactiveOmit(props, 'title', 'description', 'contentClass');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
     <Dialog v-slot="slotProps" v-bind="forwarded">
-        <DialogContent class="overflow-hidden p-0">
+        <DialogContent :class="cn('top-[12vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl', props.contentClass)">
             <DialogHeader class="sr-only">
-                <DialogTitle>{{ title }}</DialogTitle>
-                <DialogDescription>{{ description }}</DialogDescription>
+                <DialogTitle>{{ resolvedTitle }}</DialogTitle>
+                <DialogDescription>{{ resolvedDescription }}</DialogDescription>
             </DialogHeader>
             <Command>
                 <slot v-bind="slotProps" />

package/src/components/ui/command/CommandGroup.vue

@@ -34,7 +34,7 @@ onUnmounted(() => {
 
 <template>
     <ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden', props.class)" :hidden="isRender ? undefined : true">
-        <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-(--border-light) px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-(--text-secondary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark)">
+        <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-border px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
             {{ heading }}
         </ListboxGroupLabel>
         <div class="p-2">

package/src/components/ui/command/CommandInput.vue

@@ -24,8 +24,8 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-    <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
-        <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 opacity-50" />
+    <div data-slot="command-input-wrapper" class="flex h-12 items-center gap-3 border-b border-border px-4">
+        <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 text-muted-foreground" />
         <ListboxFilter v-bind="{ ...forwardedProps, ...$attrs }" v-model="filterState.search" data-slot="command-input" auto-focus :class="cn(
             'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             props.class,

package/src/components/ui/command/CommandItem.vue

@@ -44,10 +44,11 @@ const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
     if (!(currentElement.value instanceof HTMLElement)) return;
 
-    // textValue to perform filter
+    // Index both the rendered text and a string value (used as extra search keywords)
+    const keywords = typeof props.value === 'string' ? props.value : '';
     allItems.value.set(
         id,
-        currentElement.value.textContent ?? props.value?.toString() ?? '',
+        `${currentElement.value.textContent ?? ''} ${keywords}`.trim(),
     );
 
     const groupId = groupContext?.id;
@@ -66,10 +67,11 @@ onUnmounted(() => {
 
 <template>
     <ListboxItem v-if="isRender" v-bind="forwarded" :id="id" ref="itemRef" data-slot="command-item" :class="cn(
-        'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-(--text-secondary-light) outline-hidden transition-colors duration-200 select-none data-highlighted:bg-(--bg-selected-light) data-highlighted:text-(--text-primary-light) data-disabled:pointer-events-none data-disabled:opacity-50 dark:text-(--text-secondary-dark) dark:data-highlighted:bg-(--bg-selected-dark) dark:data-highlighted:text-(--text-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-current',
+        'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-muted-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-current',
         props.class,
-    )
-        " @select="
+    )" @select="
             () => {
                 filterState.search = '';
             }