@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/ButtonGroup.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: ButtonGroupVariants['size']
+  /**
+   * The orientation the buttons are laid out.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ButtonGroupVariants['orientation']
+  class?: any
+}
+
+export interface ButtonGroupSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { Primitive } from 'radix-vue'
+import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  orientation: 'horizontal'
+})
+defineSlots<ButtonGroupSlots>()
+
+provide(buttonGroupInjectionKey, computed(() => ({
+  orientation: props.orientation,
+  size: props.size
+})))
+</script>
+
+<template>
+  <Primitive :as="as" :class="buttonGroup({ orientation })">
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/Card.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/card'
+
+const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
+
+const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
+
+export interface CardProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof card.slots>
+}
+
+export interface CardSlots {
+  header(props?: {}): any
+  default(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<CardProps>()
+const slots = defineSlots<CardSlots>()
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = card()
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -0,0 +1,128 @@
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/checkbox'
+
+const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id'> {
+  label?: string
+  description?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  /**
+   * The icon displayed when checked.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  icon?: string
+  indeterminate?: InputHTMLAttributes['indeterminate']
+  /**
+   * The icon displayed when the checkbox is indeterminate.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  indeterminateIcon?: string
+  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
+  defaultValue?: boolean
+  class?: any
+  ui?: Partial<typeof checkbox.slots>
+}
+
+export interface CheckboxEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
+
+const props = defineProps<CheckboxProps>()
+const slots = defineSlots<CheckboxSlots>()
+const emits = defineEmits<CheckboxEmits>()
+
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
+
+const appConfig = useAppConfig()
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const id = _id.value ?? useId()
+
+const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
+
+const checked = computed({
+  get() {
+    return indeterminate.value ? 'indeterminate' : modelValue.value
+  },
+  set(value) {
+    modelValue.value = value === 'indeterminate' ? undefined : value
+  }
+})
+
+const ui = computed(() => checkbox({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  disabled: disabled.value,
+  checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
+}))
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <CheckboxRoot
+        :id="id"
+        v-model:checked="checked"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
+        :name="name"
+        :disabled="disabled"
+        :class="ui.base({ class: props.ui?.base })"
+        @update:checked="onUpdate"
+      >
+        <CheckboxIndicator as-child>
+          <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+    </div>
+
+    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Chip.vue

@@ -0,0 +1,76 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display some text inside the chip. */
+  text?: string | number
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  /** When `true`, translate the chip at the edge for non rounded elements. */
+  inset?: boolean
+  /** When `true`, render the chip relatively to the parent. */
+  standalone?: boolean
+  class?: any
+  ui?: Partial<typeof chip.slots>
+}
+
+export interface ChipEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+
+const props = withDefaults(defineProps<ChipProps>(), {
+  inset: false,
+  standalone: false
+})
+defineSlots<ChipSlots>()
+
+const show = defineModel<boolean>('show', { default: true })
+
+const { size } = useAvatarGroup(props)
+
+const ui = computed(() => chip({
+  color: props.color,
+  size: size.value,
+  position: props.position,
+  inset: props.inset,
+  standalone: props.standalone
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <slot />
+
+    <span v-if="show" :class="ui.base({ class: props.ui?.base })">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </Primitive>
+</template>

package/dist/runtime/components/Collapsible.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/collapsible'
+
+const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
+
+const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<CollapsibleProps>()
+const emits = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = collapsible()
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
+      <slot :open="open" />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="ui.content({ class: props.ui?.content })">
+      <slot name="content" />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

package/dist/runtime/components/CommandPalette.vue

@@ -0,0 +1,303 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxItemProps } from 'radix-vue'
+import type { FuseResult } from 'fuse.js'
+import type { AppConfig } from '@nuxt/schema'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/command-palette'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
+
+const commandPalette = tv({ extend: tv(theme), ...(appConfig.ui?.commandPalette || {}) })
+
+export interface CommandPaletteItem extends Pick<ComboboxItemProps, 'disabled'> {
+  prefix?: string
+  label?: string
+  suffix?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  kbds?: KbdProps['value'][] | KbdProps[]
+  slot?: string
+  select?(e?: Event): void
+}
+
+export interface CommandPaletteGroup<T> {
+  id: string
+  label?: string
+  slot?: string
+  items?: T[]
+  /**
+   * Wether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse).
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue true
+   */
+  filter?: boolean
+  /** Filter group items after the search happened. */
+  postFilter?: (searchTerm: string, items: T[]) => T[]
+  /** The icon displayed when an item is highlighted. */
+  highlightedIcon?: string
+}
+
+export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'selectedValue' | 'resetSearchTermOnBlur'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed in the input.
+   * @defaultValue appConfig.ui.icons.search
+   */
+  icon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The placeholder text for the input.
+   * @defaultValue 'Type a command or search...'
+   */
+  placeholder?: InputProps['placeholder']
+  /**
+   * Display a close button in the input (useful when inside a `UModal`).
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  groups?: G[]
+  /**
+   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
+   * @defaultValue { ignoreLocation: true, threshold: 0.1, keys: ['label', 'suffix'], resultLimit: 12, matchAllWhenSearchEmpty: true }
+   */
+  fuse?: UseFuseOptions<T>
+  class?: any
+  ui?: PartialString<typeof commandPalette.slots>
+}
+
+export type CommandPaletteEmits<T> = ComboboxRootEmits<T>
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+  'empty'(props: { searchTerm?: string }): any
+  'close'(props: { ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
+import { computed } from 'vue'
+import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxViewport, ComboboxGroup, ComboboxLabel, ComboboxItem, ComboboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'radix-vue'
+import { defu } from 'defu'
+import { reactivePick } from '@vueuse/core'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
+import UKbd from './Kbd.vue'
+import UInput from './Input.vue'
+import { omit } from '../utils'
+import { highlight } from '../utils/fuse'
+
+const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
+  modelValue: '',
+  placeholder: 'Type a command or search...'
+})
+const emits = defineEmits<CommandPaletteEmits<T>>()
+const slots = defineSlots<CommandPaletteSlots<G, T>>()
+
+const searchTerm = defineModel<string>('searchTerm', { default: '' })
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'selectedValue', 'resetSearchTermOnBlur'), emits)
+const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon', 'placeholder'))
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = commandPalette()
+
+const fuse = computed(() => defu({}, props.fuse, {
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: ['label', 'suffix']
+  },
+  resultLimit: 12,
+  matchAllWhenSearchEmpty: true
+}))
+
+const items = computed(() => props.groups?.filter((group) => {
+  if (!group.id) {
+    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
+    return false
+  }
+
+  if (group.filter === false) {
+    return false
+  }
+
+  return true
+}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
+
+const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
+
+function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
+  if (group?.postFilter && typeof group.postFilter === 'function') {
+    items = group.postFilter(searchTerm.value, items)
+  }
+
+  return {
+    ...group,
+    items: items.slice(0, fuse.value.resultLimit).map((item) => {
+      return {
+        ...item,
+        labelHtml: highlight<T>(item, searchTerm.value, 'label'),
+        suffixHtml: highlight<T>(item, searchTerm.value, undefined, ['label'])
+      }
+    })
+  }
+}
+
+const groups = computed(() => {
+  const groupsById = fuseResults.value.reduce((acc, result) => {
+    const { item, matches } = result
+    if (!item.group) {
+      return acc
+    }
+
+    acc[item.group] ||= []
+    acc[item.group].push({ ...item, matches })
+
+    return acc
+  }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
+
+  const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
+    const group = props.groups?.find(group => group.id === id)
+    if (!group) {
+      return
+    }
+
+    return getGroupWithItems(group, items)
+  }).filter(group => !!group)
+
+  const nonFuseGroups = props.groups?.filter(group => group.filter === false && group.items?.length).map((group) => {
+    return getGroupWithItems(group, group.items || [])
+  }) || []
+
+  return [
+    ...fuseGroups,
+    ...nonFuseGroups
+  ]
+})
+</script>
+
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <ComboboxInput as-child>
+      <UInput
+        variant="none"
+        autofocus
+        size="lg"
+        v-bind="inputProps"
+        :icon="icon || appConfig.ui.icons.search"
+        :class="ui.input({ class: props.ui?.input })"
+      >
+        <template v-if="close || !!slots.close" #trailing>
+          <slot name="close" :ui="ui">
+            <UButton
+              v-if="close"
+              :icon="closeIcon || appConfig.ui.icons.close"
+              size="md"
+              color="gray"
+              variant="ghost"
+              aria-label="Close"
+              v-bind="typeof close === 'object' ? close : undefined"
+              :class="ui.close({ class: props.ui?.close })"
+              @click="emits('update:open', false)"
+            />
+          </slot>
+        </template>
+      </UInput>
+    </ComboboxInput>
+
+    <ComboboxPortal disabled>
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" :dismissable="false">
+        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
+          <slot name="empty" :search-term="searchTerm">
+            {{ searchTerm ? `No results for ${searchTerm}` : 'No results' }}
+          </slot>
+        </ComboboxEmpty>
+
+        <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+          <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+            <ComboboxLabel v-if="group.label" :class="ui.label({ class: props.ui?.label })">
+              {{ group.label }}
+            </ComboboxLabel>
+
+            <ComboboxItem
+              v-for="(item, index) in group.items"
+              :key="`group-${groupIndex}-${index}`"
+              :value="omit(item, ['matches' as any, 'group' as any, 'select', 'labelHtml', 'suffixHtml'])"
+              :disabled="item.disabled"
+              :class="ui.item({ class: props.ui?.item })"
+              @select="item.select"
+            >
+              <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+                <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                  <UAvatar v-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
+                  <UChip
+                    v-else-if="item.chip"
+                    :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                    inset
+                    standalone
+                    v-bind="item.chip"
+                    :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
+                  />
+                </slot>
+
+                <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+                  <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                    <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
+
+                    <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase })" v-html="item.labelHtml || item.label" />
+
+                    <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix })" v-html="item.suffixHtml || item.suffix" />
+                  </slot>
+                </span>
+
+                <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
+                  <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                    <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
+                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                    </span>
+                    <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
+                  </slot>
+
+                  <ComboboxItemIndicator as-child>
+                    <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+                  </ComboboxItemIndicator>
+                </span>
+              </slot>
+            </ComboboxItem>
+          </ComboboxGroup>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>